<!DOCTYPE html><html><head><title>关于组件开发的一些杂想</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
    body{
        padding: 0 5%;
    }
    </style></head><body><div id='preview-contents' class='note-content'>
                        
                            



<h1 id="关于组件开发的一些杂想">关于组件开发的一些杂想</h1>



<h6 id="by-herberchow-2018-01-19"><em>By HerberChow 2018-05-20</em></h6>

<hr>



<h3 id="为什么要组件开发">为什么要组件开发</h3>

<p>一、加快业务迭代速度，各个业务模块组件更加独立，不再出现业务耦合情况；</p>

<p>二、稳定的公共模块采用依赖库方式，提供给各个业务线使用，减少重复开发和维护工作量；</p>

<p>三、迭代频繁的业务模块采用组件方式，各业务研发可以互不干扰、提升协作效率，并控制产品质量；</p>

<p>四、为新业务随时集成提供了基础，所有业务可上可下，灵活多变；</p>

<p>五、降低团队成员熟悉项目的成本，降低项目的维护难度；</p>

<p>六、控制代码权限，将代码的权限细分到更小的粒度；</p>

<p>……</p>

<p>又或者</p>



<h4 id="高内聚">高内聚</h4>

<p>我们将相关的一些功能组织在一起，把一切封装起来，而在组件的例子中，就可能是相关的功能逻辑和静态资源：JavaScript、HTML、CSS以及图像等。这就是我们所说的内聚。这种做法将让组件更容易维护，并且这么做之后，组件的可靠性也将提高。同时，它也能让组件的功能明确，增大组件重用的可能性。</p>



<h4 id="可重用">可重用</h4>

<p>你看到的示例组件，尤其是Web Component，更关心可重用的问题。功能明确，实现清晰，API易于理解。自然就能促进组件复用。通过构建可重用组件，我们不仅保持了 DRY（不要重复造轮子）原则，还得到了相应的好处。  <br>
这里要提醒： 不要过分尝试构建可重用组件。你更应该关注应用程序上所需要的那些特定部分。如果之后相应需求出现，或者组件的确到了可重用的地步，就花一点额外时间让组件重用。事实上，开发者都喜欢去创造可重用功能块（库、组件、模块、插件等），做得太早将会让你后来痛苦不堪。所以，吸取基于组件开发的其他好处，并且接受不是所有组件都能重用的事实。</p>



<h4 id="可互换">可互换</h4>

<p>一个功能明确好组件的API能让人轻易地更改其内部的功能实现。要是程序内部的组件是松耦合的，那事实上可以用一个组件轻易地替换另一个组件，只要遵循相同的 API/接口/约定。</p>



<h4 id="可组合">可组合</h4>

<p>基于组件的架构让组件组合成新组件更加容易。这样的设计让组件更加专注，也让其他组件中构建和暴露的功能更好利用。不论是给程序添加功能，还是用来制作完整的程序，更加复杂的功能也能如法炮制。这就是这种方法的主要好处。</p>



<h5 id="总结起来无非就是更好地维护更快地开发更容易阅读更少的代码">总结起来，无非就是更好地维护，更快地开发，更容易阅读，更少的代码</h5>

<p>例：200行代码实现的一个功能，用一行代码搞定</p>



<pre class="prettyprint hljs-dark"><code class="hljs dart"><div class="hljs-line"><span class="hljs-keyword">var</span> scrollDemo = scrollFn(<span class="hljs-string">'.class-a,'</span>.<span class="hljs-keyword">class</span>-b<span class="hljs-string">',1);</span>
</div></code></pre>



<h3 id="组件开发涉及的知识">组件开发涉及的知识</h3>

<p>面向对象编程、作用域、原型链、闭包、设计模式、类、继承、克隆…（以上仅为部分知识点）</p>



<h3 id="从调用方式看种类">从调用方式看种类</h3>

<p>1、仅js</p>



<pre class="prettyprint hljs-dark"><code class="hljs gcode"><div class="hljs-line">var boo<span class="hljs-name">m1</span> = boom<span class="hljs-comment">("canvas1","imgs/test1.jpg")</span>;
</div><div class="hljs-line">boo<span class="hljs-name">m1.</span>go<span class="hljs-comment">()</span>;
</div></code></pre>

<p>2、html（css）+js</p>



<pre class="prettyprint hljs-dark"><code class="hljs cs"><div class="hljs-line"><span class="hljs-comment">//css</span>
</div><div class="hljs-line">.pic-wrap{
</div><div class="hljs-line">    xxxxx    
</div><div class="hljs-line">}
</div><div class="hljs-line">.lightBox{
</div><div class="hljs-line">    xxxx
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//html</span>
</div><div class="hljs-line">&lt;div id=<span class="hljs-string">"light"</span>&gt;
</div><div class="hljs-line">    &lt;a <span class="hljs-keyword">class</span>=<span class="hljs-string">"pic-wrap lightBox"</span> href=<span class="hljs-string">"http://res.xyq.netease.com/pc/zt/20151214112014/images/04_7e83441.jpg"</span>&gt;
</div><div class="hljs-line">      &lt;img src=<span class="hljs-string">"http://res.xyq.netease.com/pc/zt/20151214112014/images/04_7e83441.jpg"</span> alt=<span class="hljs-string">"坏女巫"</span>&gt;
</div><div class="hljs-line">    &lt;/a&gt;
</div><div class="hljs-line">    &lt;a <span class="hljs-keyword">class</span>=<span class="hljs-string">"pic-wrap lightBox"</span> href=<span class="hljs-string">"http://res.xyq.netease.com/pc/zt/20151214112014/images/06_ca26a7f.jpg"</span>&gt;
</div><div class="hljs-line">      &lt;img src=<span class="hljs-string">"http://res.xyq.netease.com/pc/zt/20151214112014/images/06_ca26a7f.jpg"</span> alt=<span class="hljs-string">"悬挂圣诞袜"</span>&gt;
</div><div class="hljs-line">    &lt;/a&gt;
</div><div class="hljs-line">&lt;/div&gt;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//js</span>
</div><div class="hljs-line"><span class="hljs-keyword">var</span> lightbox = nie.require(<span class="hljs-string">"ui.lightBox"</span>);
</div><div class="hljs-line">$(<span class="hljs-string">'#light a'</span>).lightBox();
</div></code></pre>



<h5 id="由此可见开发的组件的时候">由此可见：开发的组件的时候：</h5>

<p>1、可以让调用者手动绑定dom节点<br>
2、可以规定必须的dom结构<br>
3、可以自动生成dom结构（甚至把css也加进来）</p>



<h6 id="纯粹由开发者个人喜好来决定">纯粹由开发者个人喜好来决定</h6>



<h3 id="组件开发应该注意什么">组件开发应该注意什么</h3>

<p>1、一个简洁易用，能用少量代码就能调用的组件固然好，但是这也意味着，能实现的功能就越少，使用者的应用场景就少；</p>



<pre class="prettyprint hljs-dark"><code class="hljs armasm"><div class="hljs-line"><span class="hljs-symbol">var</span> <span class="hljs-keyword">PopDialog </span>= <span class="hljs-meta">require</span>(<span class="hljs-string">"./PopDialog"</span>)<span class="hljs-comment">;</span>
</div><div class="hljs-line"><span class="hljs-keyword">PopDialog.Alert('我是Alert'); </span>
</div><div class="hljs-line"><wbr>
</div></code></pre>

<p>2、调用的时候需要配置较多代码的组件，或者提供api较多的组件往往能实现很多业务功能，但是同时文档学习成本也会增加，后期维护时，别的合作伙伴阅读起来也会吃力 <br>
<br>例如 IScroll，可传参数很多</p>



<pre class="prettyprint hljs-dark"><code class="hljs yaml"><div class="hljs-line"><span class="hljs-string">var</span> <span class="hljs-string">myScroll</span> <span class="hljs-string">=</span> <span class="hljs-string">new</span> <span class="hljs-string">IScroll('#wrapper',</span> <span class="hljs-string">{</span>
</div><div class="hljs-line"><span class="hljs-attr">    indicators:</span> <span class="hljs-string">{</span>
</div><div class="hljs-line"><span class="hljs-attr">        el:</span> <span class="hljs-string">[element|element</span> <span class="hljs-string">selector]</span>
</div><div class="hljs-line"><span class="hljs-attr">        fade:</span> <span class="hljs-string">false,</span>
</div><div class="hljs-line"><span class="hljs-attr">        ignoreBoundaries:</span> <span class="hljs-string">false,</span>
</div><div class="hljs-line"><span class="hljs-attr">        interactive:</span> <span class="hljs-string">false,</span>
</div><div class="hljs-line"><span class="hljs-attr">        listenX:</span> <span class="hljs-string">true,</span>
</div><div class="hljs-line"><span class="hljs-attr">        listenY:</span> <span class="hljs-string">true,</span>
</div><div class="hljs-line"><span class="hljs-attr">        resize:</span> <span class="hljs-string">true,</span>
</div><div class="hljs-line"><span class="hljs-attr">        shrink:</span> <span class="hljs-string">false,</span>
</div><div class="hljs-line"><span class="hljs-attr">        speedRatioX:</span> <span class="hljs-number">0</span><span class="hljs-string">,</span>
</div><div class="hljs-line"><span class="hljs-attr">        speedRatioY:</span> <span class="hljs-number">0</span><span class="hljs-string">,</span>
</div><div class="hljs-line">    <span class="hljs-string">}</span>
</div><div class="hljs-line"><span class="hljs-string">});</span>
</div><div class="hljs-line"><span class="hljs-string">myScroll.destroy();</span>
</div></code></pre>



<h6 id="由此想要做更多的自定义的内容则对应要写的代码就会越多反之就越少我们在开发组件时一定要先定位好自己所写的组件到底是简洁易用的还是功能完备的这两者通常是互斥的各有优劣">由此，想要做更多的自定义的内容，则对应要写的代码就会越多，反之就越少；<br>我们在开发组件时，一定要先定位好自己所写的组件到底是简洁易用的，还是功能完备的，这两者通常是互斥的，各有优劣</h6>

<p>3、扩展性。小伙伴在使用别人写的组件时，可能需要根据自身业务情况来增加组件的功能，这就需要初始开发者有良好的代码习惯，良好的注释说明，易于别人增添代码</p>



<pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-comment">//比如在一个组件内容部...</span>
</div><div class="hljs-line">......
</div><div class="hljs-line">......
</div><div class="hljs-line"><span class="hljs-comment">// 方法A</span>
</div><div class="hljs-line">functionA : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">   <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'aaa'</span>)
</div><div class="hljs-line">},
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 方法B</span>
</div><div class="hljs-line">functionB : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'bbb'</span>)
</div><div class="hljs-line">},
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//某个小伙伴新增funC</span>
</div><div class="hljs-line">functionC : <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'ccc'</span>)
</div><div class="hljs-line">},
</div><div class="hljs-line">...
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">return {
</div><div class="hljs-line">    <span class="hljs-attr">functionA</span>:functionA,
</div><div class="hljs-line">    <span class="hljs-attr">functionB</span>:functionB,
</div><div class="hljs-line">    <span class="hljs-attr">functionC</span>:functionC, <span class="hljs-comment">//新增api</span>
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div></code></pre>

<p>4、符合开闭原则，对于扩展是开放的，对于修改是关闭的。</p>

<p>5、文档和注释的编写，尤其是使用文档要编写清楚，否则别人根本不知道我们写的东西怎么用，有什么坑（<mark>重要事情说三遍</mark>）</p>



<h4 id="回顾单例结构">回顾单例结构</h4>



<pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-keyword">var</span> Artical=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">window,document</span>)</span>{
</div><div class="hljs-line">    <span class="hljs-keyword">var</span> _config = {
</div><div class="hljs-line">        <span class="hljs-attr">num</span> : <span class="hljs-number">0</span>,
</div><div class="hljs-line">        <span class="hljs-attr">speed</span> :<span class="hljs-number">50</span>,
</div><div class="hljs-line">        <span class="hljs-attr">position</span>: <span class="hljs-string">'top'</span>
</div><div class="hljs-line">    } <span class="hljs-comment">//私有全局变量对象</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getPage</span>(<span class="hljs-params"></span>)</span>{<span class="hljs-comment">//私有函数</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">     }
</div><div class="hljs-line">     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getMore</span>(<span class="hljs-params">nextUrl</span>)</span>{
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">     }
</div><div class="hljs-line">     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">addEvent</span>(<span class="hljs-params"></span>)</span>{
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">     }
</div><div class="hljs-line">     <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">remove</span>(<span class="hljs-params"></span>)</span>{
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">     }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">     <span class="hljs-keyword">var</span> init=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">param</span>)</span>{<span class="hljs-comment">//启动函数</span>
</div><div class="hljs-line">        _config.num=<span class="hljs-number">1</span>;
</div><div class="hljs-line">        _config.speed=<span class="hljs-number">10</span>;
</div><div class="hljs-line">        _config.position=<span class="hljs-string">'left'</span>;
</div><div class="hljs-line">        getPage();
</div><div class="hljs-line">        addEvent();
</div><div class="hljs-line">     }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">     <span class="hljs-keyword">var</span> exports = {<span class="hljs-comment">//开放给外部调用的函数</span>
</div><div class="hljs-line">        init : init,
</div><div class="hljs-line">        <span class="hljs-attr">remove</span>:remove,
</div><div class="hljs-line">        <span class="hljs-attr">setData</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">data</span>)</span>{<span class="hljs-comment">//提供给外部修改内部变量的方法</span>
</div><div class="hljs-line">            _config.speed=data;
</div><div class="hljs-line">        }
</div><div class="hljs-line">    };
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> exports;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"> }(<span class="hljs-built_in">window</span>,<span class="hljs-built_in">document</span>,<span class="hljs-literal">undefined</span>);
</div><div class="hljs-line"> <span class="hljs-comment">//调用示例</span>
</div><div class="hljs-line"> Artical.init();<span class="hljs-comment">//调用初始化函数</span>
</div><div class="hljs-line"> Artical.setData(<span class="hljs-string">"111"</span>);<span class="hljs-comment">//修改内部变量_config.speed</span>
</div></code></pre>

<p>私有变量，私有方法，启动函数，暴露接口，污染问题</p>



<h2 id="开始编写">开始编写</h2>

<p>通过一些示例，探讨一下如何编写组件</p>



<h4 id="示例一">示例一</h4>



<pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-comment">/**
</span></div><div class="hljs-line"> * @author BUPT-HJM
</div><div class="hljs-line"> * @name  BoomGo 1.0.1
</div><div class="hljs-line"> * @description 基于canvas的原生js图片爆炸插件
</div><div class="hljs-line"> * @updateTime 2016/08/04
</div><div class="hljs-line"> */
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">window, undefined</span>) </span>{
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">var</span>
</div><div class="hljs-line">        delayTime = <span class="hljs-number">0</span>,
</div><div class="hljs-line">        <span class="hljs-comment">// 默认竖直速度数组</span>
</div><div class="hljs-line">        <span class="hljs-comment">//randomVy = [-50,-40,-30,-10,-20, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5,10,20,30,40,50],</span>
</div><div class="hljs-line">        <span class="hljs-comment">// 预设参数</span>
</div><div class="hljs-line">        argOptions = {
</div><div class="hljs-line">            <span class="hljs-comment">//小球大小</span>
</div><div class="hljs-line">            <span class="hljs-string">'radius'</span>: <span class="hljs-number">10</span>,
</div><div class="hljs-line">            <span class="hljs-string">'minVx'</span>: <span class="hljs-number">-30</span>,
</div><div class="hljs-line">            <span class="hljs-string">'maxVx'</span>: <span class="hljs-number">30</span>,
</div><div class="hljs-line">            <span class="hljs-string">'minVy'</span>: <span class="hljs-number">-50</span>,
</div><div class="hljs-line">            <span class="hljs-string">'maxVy'</span>: <span class="hljs-number">50</span>,
</div><div class="hljs-line">            <span class="hljs-string">'edgeOpacity'</span>: <span class="hljs-literal">false</span>
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//暴露的最终变量</span>
</div><div class="hljs-line">        boom = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">canvasID, Src, options</span>) </span>{
</div><div class="hljs-line">            <span class="hljs-comment">// 创建不同的对象，保证各自作用域独立</span>
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> boom.prototype.init(canvasID, Src, options);
</div><div class="hljs-line">        };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/**
</span></div><div class="hljs-line">     * canvas上装载图片
</div><div class="hljs-line">     * @param  img    图像对象
</div><div class="hljs-line">     * @param  canvas canvas元素
</div><div class="hljs-line">     * @return ctx    绘图上下文
</div><div class="hljs-line">     */
</div><div class="hljs-line">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">drawImg</span>(<span class="hljs-params">img, canvas</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-comment">//xxxxx</span>
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    ......
</div><div class="hljs-line">    ......
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">/**
</span></div><div class="hljs-line">     * 根据参数水平速度和竖直速度更新小球位置
</div><div class="hljs-line">     */
</div><div class="hljs-line">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">updateBalls</span>(<span class="hljs-params">canvas, balls, options</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-comment">//xxxxx</span>
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">// boom对象</span>
</div><div class="hljs-line">    boom.prototype = {
</div><div class="hljs-line">        <span class="hljs-attr">init</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">canvasID, Src, options</span>) </span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> that = <span class="hljs-keyword">this</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> len = <span class="hljs-built_in">arguments</span>.length;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.canvas == <span class="hljs-string">'undefined'</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> canvas = <span class="hljs-built_in">document</span>.getElementById(canvasID);
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (canvas == <span class="hljs-literal">null</span>) {
</div><div class="hljs-line">                    <span class="hljs-built_in">console</span>.error(<span class="hljs-string">"Canvas is null.Check the canvasID."</span>);
</div><div class="hljs-line">                    <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.canvas = canvas;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> img = <span class="hljs-keyword">new</span> Image();
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.img == <span class="hljs-string">'undefined'</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.imgSrc = Src;
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.img = img;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">this</span>.hasBoom = <span class="hljs-literal">false</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-built_in">arguments</span>[<span class="hljs-number">2</span>] !== <span class="hljs-string">'undefined'</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> key2 <span class="hljs-keyword">in</span> argOptions) {
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> options[key2] == <span class="hljs-string">"undefined"</span>) {
</div><div class="hljs-line">                        options[key2] = argOptions[key2];
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.options = options;
</div><div class="hljs-line">            } <span class="hljs-keyword">else</span> {
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.options = argOptions;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            img.src = <span class="hljs-keyword">this</span>.imgSrc;
</div><div class="hljs-line">            img.onload = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">                <span class="hljs-comment">//canvas上绘制图片</span>
</div><div class="hljs-line">                that.ctx = drawImg(that.img, that.canvas);
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-attr">go</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">delayOption, callback</span>) </span>{
</div><div class="hljs-line">            <span class="hljs-comment">//xxx</span>
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">this</span>;
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">// A.prototype.init.prototype指向A.prototype</span>
</div><div class="hljs-line">    boom.prototype.init.prototype = boom.prototype;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">//暴露变量</span>
</div><div class="hljs-line">    <span class="hljs-built_in">window</span>.boom = boom;
</div><div class="hljs-line">})(<span class="hljs-built_in">window</span>)
</div></code></pre>



<h5 id="调用说明">调用说明：</h5>



<pre class="prettyprint hljs-dark"><code class="hljs gcode"><div class="hljs-line"><span class="hljs-comment">//js构造实例</span>
</div><div class="hljs-line">var boo<span class="hljs-name">m1</span> = boom<span class="hljs-comment">("canvas1","imgs/test1.jpg")</span>;
</div><div class="hljs-line"><span class="hljs-comment">//js调用爆炸图片</span>
</div><div class="hljs-line">boo<span class="hljs-name">m1.</span>go<span class="hljs-comment">()</span>;
</div></code></pre>



<pre class="prettyprint hljs-dark"><code class="hljs less"><div class="hljs-line"><span class="hljs-selector-tag">boom</span>(<span class="hljs-string">"canvas1"</span>,<span class="hljs-string">"imgs/test1.jpg"</span>)<span class="hljs-selector-class">.go</span>();
</div></code></pre>



<pre class="prettyprint hljs-dark"><code class="hljs go"><div class="hljs-line"><span class="hljs-keyword">var</span> argOptions = {
</div><div class="hljs-line">    <span class="hljs-string">'radius'</span>: <span class="hljs-number">10</span>,<span class="hljs-comment">//小球大小</span>
</div><div class="hljs-line">    <span class="hljs-string">'minVx'</span>: <span class="hljs-number">-30</span>,<span class="hljs-comment">//最小水平喷射速度</span>
</div><div class="hljs-line">    <span class="hljs-string">'maxVx'</span>: <span class="hljs-number">30</span>,<span class="hljs-comment">//最大水平喷射速度</span>
</div><div class="hljs-line">    <span class="hljs-string">'minVy'</span>: <span class="hljs-number">-50</span>,<span class="hljs-comment">//最小垂直喷射速度</span>
</div><div class="hljs-line">    <span class="hljs-string">'maxVy'</span>: <span class="hljs-number">50</span>,<span class="hljs-comment">//最大垂直喷射速度</span>
</div><div class="hljs-line">    <span class="hljs-string">'edgeOpacity'</span>: <span class="hljs-literal">false</span><span class="hljs-comment">//是否canvas边缘羽化</span>
</div><div class="hljs-line">}
</div><div class="hljs-line">boom(<span class="hljs-string">"canvas1"</span>,<span class="hljs-string">"imgs/test1.jpg"</span>,argOptions).<span class="hljs-keyword">go</span>(<span class="hljs-number">3000</span>);
</div></code></pre>



<h4 id="示例二">示例二</h4>



<pre class="prettyprint hljs-dark"><code class="hljs php"><div class="hljs-line"><span class="hljs-keyword">var</span> Scroll = {};
</div><div class="hljs-line">(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(win,doc,$)</span></span>{
</div><div class="hljs-line">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">CusScrollBar</span><span class="hljs-params">(options)</span></span>{
</div><div class="hljs-line">        <span class="hljs-comment">//初始化</span>
</div><div class="hljs-line">        this._init(options);
</div><div class="hljs-line">    }
</div><div class="hljs-line">    $.extend(CusScrollBar.prototype,{
</div><div class="hljs-line">        _init : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(options)</span></span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>.options = {
</div><div class="hljs-line">                contSelector: <span class="hljs-string">""</span>,   <span class="hljs-comment">// 滑动内容区选择器</span>
</div><div class="hljs-line">                barSelector: <span class="hljs-string">""</span>,    <span class="hljs-comment">// 滑动条选择器</span>
</div><div class="hljs-line">                sliderSelector: <span class="hljs-string">""</span>, <span class="hljs-comment">// 滑动块选择器</span>
</div><div class="hljs-line">                wheelStep: <span class="hljs-number">20</span>       <span class="hljs-comment">// 滚动步幅</span>
</div><div class="hljs-line">            };
</div><div class="hljs-line">            $.extend(<span class="hljs-keyword">true</span>,<span class="hljs-keyword">self</span>.options,options || {});
</div><div class="hljs-line">            <span class="hljs-comment">// Dom选择函数</span>
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>._initDomEvent();
</div><div class="hljs-line">            <span class="hljs-comment">// 绑定滑块点击拖动事件</span>
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>._initSliderDragEvent();
</div><div class="hljs-line">            <span class="hljs-comment">// 绑定滚轮事件</span>
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>._bandMouseWheel();
</div><div class="hljs-line">            <span class="hljs-comment">// 监听内容滚动，同步滑块移动</span>
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>._bandContScroll();
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>;
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">/*
</span></div><div class="hljs-line">         * 初始化DOM引用
</div><div class="hljs-line">         * <span class="hljs-doctag">@method</span> _initDomEvent
</div><div class="hljs-line">         */
</div><div class="hljs-line">        _initDomEvent : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> opts = this.options;
</div><div class="hljs-line">            <span class="hljs-comment">// 滑动内容区对象，必须填</span>
</div><div class="hljs-line">            this.$cont = $(opts.contSelector);
</div><div class="hljs-line">            <span class="hljs-comment">// 滑动条滑块对象，必须填</span>
</div><div class="hljs-line">            this.$slider = $(opts.sliderSelector);
</div><div class="hljs-line">            <span class="hljs-comment">// 滑动条对象</span>
</div><div class="hljs-line">            this.$bar = opts.barSelector ? $(opts.barSelector) : this.$slider.<span class="hljs-keyword">parent</span>();
</div><div class="hljs-line">            <span class="hljs-comment">// 文档对象</span>
</div><div class="hljs-line">            this.$doc = $(doc);
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">/*
</span></div><div class="hljs-line">         * 初始化滑动块滑动功能
</div><div class="hljs-line">         */
</div><div class="hljs-line">        _initSliderDragEvent : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">           <span class="hljs-comment">//xxx</span>
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">// 监听内容滚动事件，同步滑块位置</span>
</div><div class="hljs-line">        _bandContScroll : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">            <span class="hljs-comment">//xxx</span>
</div><div class="hljs-line">        },
</div><div class="hljs-line">        ......
</div><div class="hljs-line">        其他方法
</div><div class="hljs-line">        ......
</div><div class="hljs-line">        <span class="hljs-comment">// 滚动文档内容</span>
</div><div class="hljs-line">        scrollContTo : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(positionVal)</span> </span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>.$cont.scrollTop(positionVal);
</div><div class="hljs-line">        }
</div><div class="hljs-line">    });
</div><div class="hljs-line">    Scroll.CusScrollBar = CusScrollBar;
</div><div class="hljs-line">})(window,document,jQuery);
</div></code></pre>



<h5 id="调用说明-1">调用说明：</h5>



<pre class="prettyprint hljs-dark"><code class="hljs groovy"><div class="hljs-line">var batch_process = <span class="hljs-keyword">new</span> Scroll.CusScrollBar({
</div><div class="hljs-line">    <span class="hljs-string">contSelector   :</span> <span class="hljs-string">".fignav"</span>,   <span class="hljs-comment">// 滑动内容区选择器(必须)</span>
</div><div class="hljs-line">    <span class="hljs-string">barSelector    :</span> <span class="hljs-string">".sildenav"</span>,    <span class="hljs-comment">// 滑动条选择器（必须）</span>
</div><div class="hljs-line">    <span class="hljs-string">sliderSelector :</span> <span class="hljs-string">".scroll-slider"</span> <span class="hljs-comment">// 滑动快选择器</span>
</div><div class="hljs-line">});
</div><div class="hljs-line">batch_process.scrollContTo(<span class="hljs-number">1700</span>);
</div></code></pre>



<h4 id="克隆深浅复制">克隆（深浅复制）</h4>



<pre class="prettyprint hljs-dark"><code class="hljs haxe"><div class="hljs-line"><span class="hljs-comment">//深拷贝</span>
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">cloneObject</span> </span>(obj) {
</div><div class="hljs-line">    <span class="hljs-keyword">var</span> <span class="hljs-keyword">new</span><span class="hljs-type">Obj</span> = {}
</div><div class="hljs-line">    <span class="hljs-comment">//如果不是引用类型，直接返回</span>
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (typeof (obj) !== <span class="hljs-string">'object'</span>) {
</div><div class="hljs-line">      <span class="hljs-keyword">return</span> obj
</div><div class="hljs-line">    }
</div><div class="hljs-line">    <span class="hljs-comment">//如果是引用类型，遍历属性</span>
</div><div class="hljs-line">    <span class="hljs-keyword">else</span>{
</div><div class="hljs-line">         <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> attr <span class="hljs-keyword">in</span> obj) {
</div><div class="hljs-line">         <span class="hljs-comment">//如果某个属性还是引用类型，递归调用</span>
</div><div class="hljs-line">          <span class="hljs-keyword">new</span><span class="hljs-type">Obj</span>[attr] = cloneObject(obj[attr])
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span><span class="hljs-type">Obj</span>
</div><div class="hljs-line">  }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//或者</span>
</div><div class="hljs-line">const obj1 = JSON.parse(JSON.stringify(obj));
</div></code></pre>



<pre class="prettyprint hljs-dark"><code class="hljs stata"><div class="hljs-line"><span class="hljs-comment">//浅拷贝</span>
</div><div class="hljs-line"><span class="hljs-keyword">var</span> obj = { a:1, arr: [2,3] };
</div><div class="hljs-line"><span class="hljs-keyword">var</span> shallowObj = shallowCopy(obj);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">function shallowCopy(src) {
</div><div class="hljs-line">  <span class="hljs-keyword">var</span> dst = {};
</div><div class="hljs-line">  <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> <span class="hljs-keyword">prop</span> <span class="hljs-keyword">in</span> src) {
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (src.hasOwnProperty(<span class="hljs-keyword">prop</span>)) {
</div><div class="hljs-line">      dst[<span class="hljs-keyword">prop</span>] = src[<span class="hljs-keyword">prop</span>];
</div><div class="hljs-line">    }
</div><div class="hljs-line">  }
</div><div class="hljs-line">  <span class="hljs-keyword">return</span> dst;
</div><div class="hljs-line">}
</div></code></pre>



<h5 id="还有其他的objectassignjq的extend等">*还有其他的Object.assign()，jq的$.extend()等</h5>



<h4 id="示例三">示例三</h4>



<pre class="prettyprint hljs-dark"><code class="hljs kotlin"><div class="hljs-line"><span class="hljs-comment">// LazyLoad类</span>
</div><div class="hljs-line"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LazyLoad</span> </span>{
</div><div class="hljs-line">  <span class="hljs-keyword">constructor</span> () {
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.scrollListenerFn = <span class="hljs-keyword">this</span>.scrollListenerFn.bind(<span class="hljs-keyword">this</span>)
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.resizeListenerFn = <span class="hljs-keyword">this</span>.resizeListenerFn.bind(<span class="hljs-keyword">this</span>)
</div><div class="hljs-line">  }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">  init (params) {
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.initParams(params)
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    ...
</div><div class="hljs-line">  }
</div><div class="hljs-line">  <span class="hljs-comment">// 初始化一些必要的参数</span>
</div><div class="hljs-line">  initParams (params) {
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.defaultImg = params.defaultImg
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.distance = params.distance || <span class="hljs-number">0</span>
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.tag = params.tag || <span class="hljs-string">'data-src'</span>
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.frequency = params.frequency || <span class="hljs-number">14</span>
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.isBg = params.isBg || <span class="hljs-literal">false</span>
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    <span class="hljs-keyword">this</span>.getWH()
</div><div class="hljs-line">  }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">  scrollListenerFn () {
</div><div class="hljs-line">    ...
</div><div class="hljs-line">  }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">  getWH () {
</div><div class="hljs-line">    ...
</div><div class="hljs-line">  }
</div><div class="hljs-line">}
</div></code></pre>



<h5 id="调用说明-2">调用说明：</h5>



<pre class="prettyprint hljs-dark"><code class="hljs pony"><div class="hljs-line"><span class="hljs-keyword">let</span> lazyload = <span class="hljs-function"><span class="hljs-keyword">new</span> <span class="hljs-title">LazyLoad</span>()
</span></div><div class="hljs-line"><span class="hljs-title">lazyload</span>.<span class="hljs-title">init</span>({elements: domObjList})
</div></code></pre>



<pre class="prettyprint hljs-dark"><code class="hljs groovy"><div class="hljs-line">let lazyload = <span class="hljs-keyword">new</span> LazyLoad()
</div><div class="hljs-line">lazyload.init({<span class="hljs-string">elements:</span> document.querySelectorAll(<span class="hljs-string">'.bgBox'</span>), <span class="hljs-string">distance:</span> <span class="hljs-number">50</span>, <span class="hljs-string">tag:</span> <span class="hljs-string">'imgurl'</span>, <span class="hljs-string">frequency:</span> <span class="hljs-number">20</span>, <span class="hljs-string">isBg:</span> <span class="hljs-literal">true</span>, <span class="hljs-string">defaultImg:</span> <span class="hljs-string">'https://dummyimage.com/200x200/ff0ff0&amp;text=66'</span>})
</div></code></pre>



<h4 id="示例四">示例四</h4>



<pre class="prettyprint hljs-dark"><code class="hljs qml"><div class="hljs-line">(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">factory</span>) </span>{
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> define === <span class="hljs-string">'function'</span> &amp;&amp; define.amd) {
</div><div class="hljs-line">            define([<span class="hljs-string">'exports'</span>], <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">exports</span>) </span>{
</div><div class="hljs-line">                <span class="hljs-built_in">window</span>.C3D = factory(exports);
</div><div class="hljs-line">            });
</div><div class="hljs-line">        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> exports !== <span class="hljs-string">'undefined'</span>) {
</div><div class="hljs-line">            factory(exports);
</div><div class="hljs-line">        } <span class="hljs-title">else</span> {
</div><div class="hljs-line">            <span class="hljs-built_in">window</span>.C3D = factory({});
</div><div class="hljs-line">        }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    }(<span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">C3D</span>) </span>{
</div><div class="hljs-line">        <span class="hljs-comment">// --------------------------------------------------------------------extend</span>
</div><div class="hljs-line">        <span class="hljs-built_in">var</span> extend = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">protoProps, staticProps</span>) </span>{
</div><div class="hljs-line">            <span class="hljs-built_in">var</span> <span class="hljs-built_in">parent</span> = <span class="hljs-keyword">this</span>;
</div><div class="hljs-line">            <span class="hljs-built_in">var</span> child;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (protoProps &amp;&amp; <span class="hljs-built_in">Object</span>.prototype.hasOwnProperty.call(protoProps, <span class="hljs-string">'constructor'</span>)) {
</div><div class="hljs-line">                child = protoProps.constructor;
</div><div class="hljs-line">            } <span class="hljs-title">else</span> {
</div><div class="hljs-line">                child = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">                    <span class="hljs-keyword">return</span> <span class="hljs-built_in">parent</span>.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);
</div><div class="hljs-line">                };
</div><div class="hljs-line">            }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-built_in">Object</span>.assign(child, <span class="hljs-built_in">parent</span>, staticProps);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-built_in">var</span> Surrogate = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.constructor = child;
</div><div class="hljs-line">            };
</div><div class="hljs-line">            Surrogate.prototype = <span class="hljs-built_in">parent</span>.prototype;
</div><div class="hljs-line">            child.prototype = <span class="hljs-keyword">new</span> Surrogate;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (protoProps) <span class="hljs-built_in">Object</span>.assign(child.prototype, protoProps);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            child.__super__ = <span class="hljs-built_in">parent</span>.prototype;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> child;
</div><div class="hljs-line">        };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-comment">// --------------------------------------------------------------------color辅助方法</span>
</div><div class="hljs-line">        C3D.getRandomColor = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">            ......
</div><div class="hljs-line">        };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        C3D.rgb2hex = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">r, g, b</span>) </span>{
</div><div class="hljs-line">            ......
</div><div class="hljs-line">        };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-comment">// --------------------------------------------------------------------其他辅助方法</span>
</div><div class="hljs-line">        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fixed0</span>(<span class="hljs-params">n</span>) </span>{
</div><div class="hljs-line">            ......
</div><div class="hljs-line">        }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-comment">// --------------------------------------------------------------------3d元素基类</span>
</div><div class="hljs-line">        C3D.Object = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">            <span class="hljs-keyword">this</span>.initialize.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);
</div><div class="hljs-line">        };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-built_in">Object</span>.assign(C3D.Object.prototype, {
</div><div class="hljs-line">            <span class="hljs-attribute">x</span>: <span class="hljs-number">0</span>,
</div><div class="hljs-line">            <span class="hljs-attribute">position</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">x, y, z</span>) </span>{
</div><div class="hljs-line">               ......
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            ......
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-attribute">initialize</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">                <span class="hljs-comment">//xxxx</span>
</div><div class="hljs-line">            },
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-comment">//扩展函数</span>
</div><div class="hljs-line">        C3D.Object.extend = extend;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        C3D.Sprite = C3D.Object.extend({
</div><div class="hljs-line">            <span class="hljs-attribute">alpha</span>: <span class="hljs-number">1</span>,
</div><div class="hljs-line">            <span class="hljs-attribute">visible</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">            <span class="hljs-attribute">initialize</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">params</span>) </span>{
</div><div class="hljs-line">                <span class="hljs-comment">//初始化的一些操作</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-attribute">name</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">str</span>) </span>{
</div><div class="hljs-line">                <span class="hljs-comment">//其他一些方法</span>
</div><div class="hljs-line">            },
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-comment">// --------------------------------------------------------------------3d核心元件</span>
</div><div class="hljs-line">        C3D.Stage = C3D.Sprite.extend({
</div><div class="hljs-line">            <span class="hljs-comment">//定义舞台</span>
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        C3D.Camera = C3D.Object.extend({
</div><div class="hljs-line">            <span class="hljs-comment">//定义摄像机</span>
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-comment">// --------------------------------------------------------------------3d显示元件</span>
</div><div class="hljs-line">        C3D.Plane = C3D.Sprite.extend({
</div><div class="hljs-line">            <span class="hljs-comment">//定义平面</span>
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        C3D.Box = C3D.Sprite.extend({
</div><div class="hljs-line">            <span class="hljs-comment">//定义盒子</span>
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        C3D.Skybox = C3D.Box.extend({
</div><div class="hljs-line">            <span class="hljs-comment">//定义天空</span>
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-comment">// --------------------------------------------------------------------创建场景</span>
</div><div class="hljs-line">        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">createObj</span>(<span class="hljs-params">obj</span>) </span>{
</div><div class="hljs-line">            <span class="hljs-built_in">var</span> _o;
</div><div class="hljs-line">            <span class="hljs-keyword">switch</span> (obj.type) {
</div><div class="hljs-line">                <span class="hljs-keyword">case</span> <span class="hljs-string">'sprite'</span>:
</div><div class="hljs-line">                    _o = <span class="hljs-keyword">new</span> C3D.Sprite(obj.el ? {<span class="hljs-attribute">el</span>: obj.el} : <span class="hljs-literal">undefined</span>);
</div><div class="hljs-line">                    <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                <span class="hljs-keyword">case</span> <span class="hljs-string">'plane'</span>:
</div><div class="hljs-line">                    _o = <span class="hljs-keyword">new</span> C3D.Plane(obj.el ? {<span class="hljs-attribute">el</span>: obj.el} : <span class="hljs-literal">undefined</span>);
</div><div class="hljs-line">                    <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                <span class="hljs-keyword">case</span> <span class="hljs-string">'box'</span>:
</div><div class="hljs-line">                    _o = <span class="hljs-keyword">new</span> C3D.Box(obj.el ? {<span class="hljs-attribute">el</span>: obj.el} : <span class="hljs-literal">undefined</span>);
</div><div class="hljs-line">                    <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">                <span class="hljs-keyword">case</span> <span class="hljs-string">'skybox'</span>:
</div><div class="hljs-line">                    _o = <span class="hljs-keyword">new</span> C3D.Skybox(obj.el ? {<span class="hljs-attribute">el</span>: obj.el} : <span class="hljs-literal">undefined</span>);
</div><div class="hljs-line">                    <span class="hljs-keyword">break</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">//其他操作</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> _o;
</div><div class="hljs-line">        }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        C3D.create = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">obj</span>) </span>{
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span>(obj) == <span class="hljs-string">'object'</span>) {
</div><div class="hljs-line">                <span class="hljs-built_in">var</span> _obj = obj <span class="hljs-keyword">instanceof</span> <span class="hljs-built_in">Array</span> ? {<span class="hljs-attribute">type</span>: <span class="hljs-string">'sprite'</span>, <span class="hljs-attribute">children</span>: obj} : obj;
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> createObj(_obj);
</div><div class="hljs-line">            } <span class="hljs-title">else</span> {
</div><div class="hljs-line">                <span class="hljs-keyword">throw</span> <span class="hljs-string">'create arguments is wrong!'</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">        };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> C3D;
</div><div class="hljs-line">    }));
</div></code></pre>



<h5 id="调用说明-3">调用说明：</h5>



<pre class="prettyprint hljs-dark"><code class="hljs groovy"><div class="hljs-line">var s = <span class="hljs-keyword">new</span> C3D.Stage();  
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">==================
</div><div class="hljs-line">所有的函数都可以链式调用,
</div><div class="hljs-line">s.size(window.innerWidth, window.innerHeight).material({  
</div><div class="hljs-line">    <span class="hljs-string">color :</span> <span class="hljs-string">"#cccccc"</span>  
</div><div class="hljs-line">}).update();  
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">==================
</div><div class="hljs-line">以上代码也可以等同以下代码
</div><div class="hljs-line">s.width = window.innerWidth;  
</div><div class="hljs-line">s.height = window.innerHeight;  
</div><div class="hljs-line">s.material({<span class="hljs-string">color :</span> <span class="hljs-string">"#cccccc"</span>});  
</div><div class="hljs-line">s.update();  
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">==================
</div><div class="hljs-line">var c = <span class="hljs-keyword">new</span> C3D.Cube();  
</div><div class="hljs-line">c.size(<span class="hljs-number">100</span>).position(<span class="hljs-number">0</span>, <span class="hljs-number">-100</span>, -s.fov).rotation(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>).material({  
</div><div class="hljs-line">    <span class="hljs-string">front :</span> {<span class="hljs-string">color:</span>C3D.getRandomColor()},  
</div><div class="hljs-line">    <span class="hljs-string">back :</span> {<span class="hljs-string">color:</span>C3D.getRandomColor()},  
</div><div class="hljs-line">    <span class="hljs-string">left :</span> {<span class="hljs-string">color:</span>C3D.getRandomColor()},  
</div><div class="hljs-line">    <span class="hljs-string">right :</span> {<span class="hljs-string">color:</span>C3D.getRandomColor()},  
</div><div class="hljs-line">    <span class="hljs-string">up :</span> {<span class="hljs-string">color:</span>C3D.getRandomColor()},  
</div><div class="hljs-line">    <span class="hljs-string">down :</span> {<span class="hljs-string">color:</span>C3D.getRandomColor()},  
</div><div class="hljs-line">}).update();  
</div><div class="hljs-line">s.addChild(c);  
</div></code></pre>



<h4 id="个人示例一">个人示例一</h4>

<p>链接 <a href="http://herbertchow.gitee.io/mobivideo/" target="_blank">http://herbertchow.gitee.io/mobivideo/</a></p>



<pre class="prettyprint hljs-dark"><code class="hljs php"><div class="hljs-line"><span class="hljs-keyword">var</span> mobileVideoPlayer = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{ <span class="hljs-comment">//定义单例</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">var</span> _class = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(options)</span></span>{<span class="hljs-comment">//内部类</span>
</div><div class="hljs-line">        this.options=$.extend({
</div><div class="hljs-line">            playBtn:<span class="hljs-string">''</span>,
</div><div class="hljs-line">            src:<span class="hljs-string">''</span>
</div><div class="hljs-line">        },options);
</div><div class="hljs-line">        this.init();
</div><div class="hljs-line">    }
</div><div class="hljs-line">    _class.prototype = {<span class="hljs-comment">//对象私有方法</span>
</div><div class="hljs-line">        init : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{<span class="hljs-comment">//对象初始化</span>
</div><div class="hljs-line">             this.initialize();
</div><div class="hljs-line">             this.addEvent();
</div><div class="hljs-line">             <span class="hljs-comment">// console.log(this);</span>
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//绑定函数</span>
</div><div class="hljs-line">        addEvent:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{<span class="hljs-comment">//事件绑定</span>
</div><div class="hljs-line">            console.log(<span class="hljs-number">3333</span>)
</div><div class="hljs-line">        },
</div><div class="hljs-line">        setTamplate:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">            <span class="hljs-keyword">if</span>(!<span class="hljs-keyword">self</span>.tamplate){
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> vid = <span class="hljs-keyword">self</span>.options.src;
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>.tamplate = <span class="hljs-string">'&lt;div class="bg'</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">'"&gt;&lt;/div&gt;&lt;video src="'</span>+vid+<span class="hljs-string">'" controls="controls" id="tsvideo'</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">'"&gt;&lt;/video&gt;&lt;div class="vid-close'</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">'"&gt;&lt;i&gt;&lt;/i&gt;&lt;em&gt;&lt;/em&gt;&lt;/div&gt;'</span>;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">if</span>($(<span class="hljs-string">'#video'</span>+<span class="hljs-keyword">self</span>.timeNumId).length&lt;<span class="hljs-number">1</span>){
</div><div class="hljs-line">                $(<span class="hljs-string">'body'</span>).append(<span class="hljs-string">'&lt;div id="video'</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">'"&gt;&lt;/div&gt;'</span>);
</div><div class="hljs-line">            }
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>.tamplate;
</div><div class="hljs-line">        },
</div><div class="hljs-line">        addDomClass:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> cssText = <span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">"{position:fixed;width:100%;height:100%;top:0;left:0;display:none;z-index:9999;bottom:0} "</span>
</div><div class="hljs-line">            + <span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">" .vid-close"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">"{position: absolute;width: 44px;height: 50px;top: 100px;left: 50%;-webkit-transform: translate3d(-50%,-50%,0);transform: translate3d(-50%,-50%,0);display: block;z-index: 11000;} "</span>
</div><div class="hljs-line">            + <span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">" .vid-close"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">" i{position: absolute;top:4px;left:2px;display: block;width: 5px;height: 50px;background: #fff;-webkit-transform: rotate(-45deg);-webkit-transform-origin: 0 0 0;transform: rotate(-45deg);transform-origin: 0 0 0;}"</span>
</div><div class="hljs-line">            + <span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">" .vid-close"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">" em{position: absolute;top:0;right:0;display: block;width: 5px;height: 50px;background: #fff;-webkit-transform: rotate(45deg);-webkit-transform-origin: 0 0 0;transform: rotate(45deg);transform-origin: 0 0 0;}"</span>
</div><div class="hljs-line">            + <span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">" .bg"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">"{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.8;bottom:0} "</span>
</div><div class="hljs-line">            + <span class="hljs-string">"#tsvideo"</span>+<span class="hljs-keyword">self</span>.timeNumId+<span class="hljs-string">"{position:absolute;top:50%;left:0;width:100%;-webkit-transform: translate3d(0,-50%,0);transform: translate3d(0,-50%,0);}"</span>;
</div><div class="hljs-line">            $(<span class="hljs-string">'body'</span>).append(<span class="hljs-string">"&lt;style type='text/css'&gt;"</span>+cssText+<span class="hljs-string">"&lt;/style&gt;"</span>);
</div><div class="hljs-line">        },
</div><div class="hljs-line">        setVideo:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>.playBtn = <span class="hljs-keyword">self</span>.options.playBtn;
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> _child = <span class="hljs-string">'.bg'</span>+<span class="hljs-keyword">self</span>.timeNumId + <span class="hljs-string">', .vid-close'</span>+<span class="hljs-keyword">self</span>.timeNumId;
</div><div class="hljs-line">            $(<span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId).on(<span class="hljs-string">"touchend"</span>,_child, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">               setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                   $(<span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId).hide(), $(<span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId).html(<span class="hljs-string">""</span>);
</div><div class="hljs-line">                }, <span class="hljs-number">100</span>)
</div><div class="hljs-line">            });
</div><div class="hljs-line">            <span class="hljs-comment">/*****用于pc演示，可是直接去掉start***/</span>
</div><div class="hljs-line">            $(<span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId).on(<span class="hljs-string">"click"</span>,_child, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">               setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                   $(<span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId).hide(), $(<span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId).html(<span class="hljs-string">""</span>);
</div><div class="hljs-line">                }, <span class="hljs-number">100</span>)
</div><div class="hljs-line">            });
</div><div class="hljs-line">            <span class="hljs-comment">/*****用于pc演示，可是直接去掉end***/</span>
</div><div class="hljs-line">            $(<span class="hljs-keyword">self</span>.playBtn).on(<span class="hljs-string">'click'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                <span class="hljs-comment">// var e = $(this).attr("data-vid");</span>
</div><div class="hljs-line">                $(<span class="hljs-string">"#video"</span>+<span class="hljs-keyword">self</span>.timeNumId).html(<span class="hljs-keyword">self</span>.setTamplate()).show();
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> n = $(<span class="hljs-string">"#tsvideo"</span>+<span class="hljs-keyword">self</span>.timeNumId).get(<span class="hljs-number">0</span>);
</div><div class="hljs-line">                setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                    n.play();
</div><div class="hljs-line">                }, <span class="hljs-number">50</span>)
</div><div class="hljs-line">            });
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//初始化</span>
</div><div class="hljs-line">        initialize:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">            <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>.timeNumId = Math.floor(Math.random()*<span class="hljs-number">100</span>);
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>.addDomClass();
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>.setTamplate();
</div><div class="hljs-line">            <span class="hljs-keyword">self</span>.setVideo();
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">        setting:<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(options)</span></span>{<span class="hljs-comment">//提供给外部调用的方法，修改所有实例的公有参数</span>
</div><div class="hljs-line">             setParam(options);
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//开始</span>
</div><div class="hljs-line">        play:_class.play,
</div><div class="hljs-line">        create : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(options)</span></span>{<span class="hljs-comment">//提供给外部调用的方法，创建实例</span>
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> _class(options);
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line">}();
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//调用方式</span>
</div><div class="hljs-line"><span class="hljs-comment">// var a = mobileVideoPlayer.create({</span>
</div><div class="hljs-line"><span class="hljs-comment">//     'playBtn':'.top-banner'</span>
</div><div class="hljs-line"><span class="hljs-comment">// });</span>
</div></code></pre>



<h5 id="调用说明-4">调用说明：</h5>



<pre class="prettyprint hljs-dark"><code class="hljs ebnf"><div class="hljs-line"><span class="hljs-attribute">var a</span> = mobileVideoPlayer.create({
</div><div class="hljs-line">        <span class="hljs-string">'playBtn'</span>:<span class="hljs-string">'.con1'</span>,
</div><div class="hljs-line">        <span class="hljs-string">'src'</span>:<span class="hljs-string">'https://nie.v.netease.com/nie/2017/0619/392276668c7a0649fd4f0fd32e056e90qt.mp4'</span>
</div><div class="hljs-line">    });
</div></code></pre>



<h4 id="个人示例二">个人示例二</h4>

<p>链接 <a href="http://herbertchow.gitee.io/hbscroll/" target="_blank">http://herbertchow.gitee.io/hbscroll/</a></p>



<pre class="prettyprint hljs-dark"><code class="hljs php"><div class="hljs-line"><span class="hljs-comment">//scroll_v2 版 滚动条出炉</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/******
</span></div><div class="hljs-line">需要在css中加入以下代码,可以设置样式，暂时所有滚动条都共用一个样式
</div><div class="hljs-line">如有需要不一样的样式，可根据具体滚动条用 ID选择器 选择，再调节样式
</div><div class="hljs-line">.hbScroll-wrap{
</div><div class="hljs-line">    position: absolute;
</div><div class="hljs-line">    width: 50px;
</div><div class="hljs-line">    height: 100%;
</div><div class="hljs-line">    right: 0;
</div><div class="hljs-line">    top: 0;
</div><div class="hljs-line">    display: block;
</div><div class="hljs-line">    background: blue;
</div><div class="hljs-line">}
</div><div class="hljs-line">.hbScroll-wrap .hbScroll-silde{
</div><div class="hljs-line">    position: absolute;
</div><div class="hljs-line">    width: 100%;
</div><div class="hljs-line">    height: 30px;
</div><div class="hljs-line">    top: 0;
</div><div class="hljs-line">    left: 0;
</div><div class="hljs-line">    display: block;
</div><div class="hljs-line">    background: red;
</div><div class="hljs-line">}
</div><div class="hljs-line">****/
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/*********
</span></div><div class="hljs-line">父容器只是用于绑定滚动条位置，父容器和$con滚动区需要设置position属性，父容器最好也设一下宽高
</div><div class="hljs-line">$con滚动区内容要设置高度height，overflow:hidden
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">参考
</div><div class="hljs-line">.xxxx{
</div><div class="hljs-line">    position: absolute;
</div><div class="hljs-line">    top: 50%;
</div><div class="hljs-line">    left: 50%;
</div><div class="hljs-line">    height: 500px;
</div><div class="hljs-line">    width: 500px;
</div><div class="hljs-line">    background: red;
</div><div class="hljs-line">    z-index: 10000;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    .yyyy{
</div><div class="hljs-line">        position: relative;
</div><div class="hljs-line">        padding-top: 10px;
</div><div class="hljs-line">        overflow: hidden;
</div><div class="hljs-line">        height: 100px;
</div><div class="hljs-line">        background: green;
</div><div class="hljs-line">    }
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">****/
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">var</span> hbScroll = <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(parentSelectorA,contSelectorA,gid)</span></span>{<span class="hljs-comment">//这个方法要用JQ</span>
</div><div class="hljs-line">    <span class="hljs-keyword">var</span> Scroll = {};
</div><div class="hljs-line">    <span class="hljs-keyword">if</span>($(<span class="hljs-string">'#hbScroll-wrap'</span>+gid).length&gt;<span class="hljs-number">0</span>){
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> <span class="hljs-keyword">false</span>;
</div><div class="hljs-line">    }
</div><div class="hljs-line">    (<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(win,doc,$)</span></span>{
</div><div class="hljs-line">        <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">CusScrollBar</span><span class="hljs-params">(options)</span></span>{
</div><div class="hljs-line">            <span class="hljs-comment">//初始化</span>
</div><div class="hljs-line">            this._init(options);
</div><div class="hljs-line">        }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        $.extend(CusScrollBar.prototype,{
</div><div class="hljs-line">            _init : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(options)</span></span>{
</div><div class="hljs-line">                <span class="hljs-keyword">if</span>($(<span class="hljs-string">'#hbScroll-wrap'</span>+gid).length&gt;<span class="hljs-number">0</span>){
</div><div class="hljs-line">                    <span class="hljs-keyword">return</span> <span class="hljs-keyword">false</span>;
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>.options = {
</div><div class="hljs-line">                    contSelector: <span class="hljs-string">""</span>,   <span class="hljs-comment">// 滑动内容区选择器</span>
</div><div class="hljs-line">                    barSelector: <span class="hljs-string">""</span>,    <span class="hljs-comment">// 滑动条选择器</span>
</div><div class="hljs-line">                    sliderSelector: <span class="hljs-string">""</span>, <span class="hljs-comment">// 滑动块选择器</span>
</div><div class="hljs-line">                    parentSelector: <span class="hljs-string">""</span>,<span class="hljs-comment">//父元素</span>
</div><div class="hljs-line">                    selfId:<span class="hljs-string">""</span>,<span class="hljs-comment">//唯一id</span>
</div><div class="hljs-line">                    wheelStep: <span class="hljs-number">20</span>       <span class="hljs-comment">// 滚动步幅</span>
</div><div class="hljs-line">                };
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                $.extend(<span class="hljs-keyword">true</span>,<span class="hljs-keyword">self</span>.options,options || {});
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                <span class="hljs-comment">//插入滚动条</span>
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>._initAppend();
</div><div class="hljs-line">                <span class="hljs-comment">// Dom选择函数</span>
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>._initDomEvent();
</div><div class="hljs-line">                <span class="hljs-comment">// 绑定滑块点击拖动事件</span>
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>._initSliderDragEvent();
</div><div class="hljs-line">                <span class="hljs-comment">// 绑定滚轮事件</span>
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>._bandMouseWheel();
</div><div class="hljs-line">                <span class="hljs-comment">// 监听内容滚动，同步滑块移动</span>
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>._bandContScroll();
</div><div class="hljs-line">                <span class="hljs-comment">//如果无需滚动条，则隐藏滚动条</span>
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>.checkShowHide();
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>;
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">/*
</span></div><div class="hljs-line">             * 初始化插入滚动条
</div><div class="hljs-line">             * <span class="hljs-doctag">@method</span> _initAppend
</div><div class="hljs-line">             */
</div><div class="hljs-line">            _initAppend : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> opts = this.options;
</div><div class="hljs-line">                <span class="hljs-comment">//父元素，必填</span>
</div><div class="hljs-line">                this.$par = $(opts.parentSelector);
</div><div class="hljs-line">                this.$selfId = opts.selfId;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> _html = <span class="hljs-string">'&lt;div class="hbScroll-wrap" id="hbScroll-wrap'</span>+this.$selfId+<span class="hljs-string">'"&gt;&lt;div class="hbScroll-silde"&gt;&lt;/div&gt;&lt;/div&gt;'</span>;
</div><div class="hljs-line">                this.$par.append(_html);
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">/*
</span></div><div class="hljs-line">             * 初始化DOM引用
</div><div class="hljs-line">             * <span class="hljs-doctag">@method</span> _initDomEvent
</div><div class="hljs-line">             */
</div><div class="hljs-line">            _initDomEvent : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> opts = this.options;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                <span class="hljs-comment">//父元素，必填</span>
</div><div class="hljs-line">                this.$par = $(opts.parentSelector);
</div><div class="hljs-line">                <span class="hljs-comment">// 滑动内容区对象，必须填</span>
</div><div class="hljs-line">                this.$cont = $(opts.contSelector);
</div><div class="hljs-line">                <span class="hljs-comment">// 滑动条滑块对象，必须填</span>
</div><div class="hljs-line">                <span class="hljs-comment">// this.$slider = $(opts.sliderSelector);</span>
</div><div class="hljs-line">                this.$slider = $(<span class="hljs-string">'#hbScroll-wrap'</span>+this.$selfId+<span class="hljs-string">' .hbScroll-silde'</span>);
</div><div class="hljs-line">                <span class="hljs-comment">// 滑动条对象</span>
</div><div class="hljs-line">                <span class="hljs-comment">// this.$bar = opts.barSelector ? $(opts.barSelector) : this.$slider.parent();</span>
</div><div class="hljs-line">                this.$bar = $(<span class="hljs-string">'#hbScroll-wrap'</span>+this.$selfId);
</div><div class="hljs-line">                <span class="hljs-comment">// 文档对象</span>
</div><div class="hljs-line">                this.$doc = $(doc);
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">/*
</span></div><div class="hljs-line">             * 初始化滑动块滑动功能
</div><div class="hljs-line">             */
</div><div class="hljs-line">            _initSliderDragEvent : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this,
</div><div class="hljs-line">                    slider = <span class="hljs-keyword">self</span>.$slider,<span class="hljs-comment">//滑块</span>
</div><div class="hljs-line">                    cont = <span class="hljs-keyword">self</span>.$cont,<span class="hljs-comment">//内容区</span>
</div><div class="hljs-line">                    doc = <span class="hljs-keyword">self</span>.$doc,<span class="hljs-comment">//document</span>
</div><div class="hljs-line">                    dragStartPagePosition,
</div><div class="hljs-line">                    dragStartScrollPosition,
</div><div class="hljs-line">                    dragContBarRate;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">mousemoveHandler</span><span class="hljs-params">(e)</span></span>{
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span>(dragStartPagePosition == <span class="hljs-keyword">null</span>){
</div><div class="hljs-line">                        <span class="hljs-keyword">return</span>;
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                    <span class="hljs-keyword">self</span>.scrollContTo(dragStartScrollPosition + (e.pageY - dragStartPagePosition)*dragContBarRate);
</div><div class="hljs-line">                }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                slider.on(<span class="hljs-string">"mousedown"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span></span>{
</div><div class="hljs-line">                    event.preventDefault();
</div><div class="hljs-line">                    dragStartPagePosition = event.pageY;
</div><div class="hljs-line">                    dragStartScrollPosition = cont[<span class="hljs-number">0</span>].scrollTop;
</div><div class="hljs-line">                    dragContBarRate = <span class="hljs-keyword">self</span>.getMaxScrollPosition()/<span class="hljs-keyword">self</span>.getMaxSliderPosition();
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                    doc.on(<span class="hljs-string">"mousemove.scroll"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event)</span></span>{
</div><div class="hljs-line">                        event.preventDefault();
</div><div class="hljs-line">                        mousemoveHandler(event);
</div><div class="hljs-line">                    }).on(<span class="hljs-string">"mouseup.scroll"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event)</span></span>{
</div><div class="hljs-line">                        event.preventDefault();
</div><div class="hljs-line">                        doc.off(<span class="hljs-string">".scroll"</span>);
</div><div class="hljs-line">                    });
</div><div class="hljs-line">                });
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">// 监听内容滚动事件，同步滑块位置</span>
</div><div class="hljs-line">            _bandContScroll : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>.$cont.on(<span class="hljs-string">"scroll"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
</div><div class="hljs-line">                    e.preventDefault();
</div><div class="hljs-line">                    <span class="hljs-keyword">self</span>.$slider.css( <span class="hljs-string">'top'</span>, <span class="hljs-keyword">self</span>.getSliderPosition() + <span class="hljs-string">'px'</span>);
</div><div class="hljs-line">                });
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">// 绑定鼠标滚轮事件</span>
</div><div class="hljs-line">            _bandMouseWheel : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>.$cont.on(<span class="hljs-string">"mousewheel DOMMouseScroll"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
</div><div class="hljs-line">                    <span class="hljs-comment">// e.preventDefault();</span>
</div><div class="hljs-line">                    <span class="hljs-comment">// var oEv = e.originalEvent;</span>
</div><div class="hljs-line">                    <span class="hljs-comment">// var wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/120 : (oEv.detail || 0)/3;</span>
</div><div class="hljs-line">                    <span class="hljs-comment">// self.scrollContTo(self.$cont[0].scrollTop + wheelRange * self.options.wheelStep);</span>
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span>( <span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollTop&gt;<span class="hljs-number">0</span> &amp;&amp;
</div><div class="hljs-line">                        !(<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollTop
</div><div class="hljs-line">                        &gt;=(<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollHeight 
</div><div class="hljs-line">                        -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-top"</span>).match(/\d+(\.\d+)?/g))
</div><div class="hljs-line">                        -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-bottom"</span>).match(/\d+(\.\d+)?/g))
</div><div class="hljs-line">                        -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"height"</span>).match(/\d+(\.\d+)?/g)) ) )  ){
</div><div class="hljs-line">                        e.preventDefault();
</div><div class="hljs-line">                    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                    <span class="hljs-keyword">var</span> oEv = e.originalEvent;
</div><div class="hljs-line">                    <span class="hljs-keyword">var</span> wheelRange = oEv.wheelDelta ? -oEv.wheelDelta/<span class="hljs-number">120</span> : (oEv.detail || <span class="hljs-number">0</span>)/<span class="hljs-number">3</span>;
</div><div class="hljs-line">                    <span class="hljs-keyword">self</span>.scrollContTo(<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollTop + wheelRange * <span class="hljs-keyword">self</span>.options.wheelStep);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span>( !(<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollTop&lt;=<span class="hljs-number">0</span>) &amp;&amp;
</div><div class="hljs-line">                        !(<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollTop
</div><div class="hljs-line">                        &gt;=(<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollHeight 
</div><div class="hljs-line">                        -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-top"</span>).match(/\d+(\.\d+)?/g))
</div><div class="hljs-line">                        -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-bottom"</span>).match(/\d+(\.\d+)?/g))
</div><div class="hljs-line">                        -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"height"</span>).match(/\d+(\.\d+)?/g)) ) )  ){
</div><div class="hljs-line">                        e.preventDefault();
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                });
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>;
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">// 获取滑块位置</span>
</div><div class="hljs-line">            getSliderPosition : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollTop/(<span class="hljs-keyword">self</span>.getMaxScrollPosition()/<span class="hljs-keyword">self</span>.getMaxSliderPosition());
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">// 文档可滚动最大距离</span>
</div><div class="hljs-line">            getMaxScrollPosition : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> Math.max(<span class="hljs-keyword">self</span>.$cont.height(),<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollHeight) - <span class="hljs-keyword">self</span>.$cont.height() -parseInt($.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-top"</span>).match(/\d+(\.\d+)?/g)))-parseInt($.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-bottom"</span>).match(/\d+(\.\d+)?/g)));
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">// 滑块可移动最大距离</span>
</div><div class="hljs-line">            getMaxSliderPosition : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> <span class="hljs-keyword">self</span>.$bar.height() - <span class="hljs-keyword">self</span>.$slider.height();
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">// 滚动文档内容</span>
</div><div class="hljs-line">            scrollContTo : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(positionVal)</span> </span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>.$cont.scrollTop(positionVal);
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">//检测滚动条是否隐藏</span>
</div><div class="hljs-line">            checkShowHide : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                <span class="hljs-keyword">if</span>(Math.max(<span class="hljs-keyword">self</span>.$cont.height(),<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollHeight) - <span class="hljs-keyword">self</span>.$cont.height() -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-top"</span>).match(/\d+(\.\d+)?/g))-$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-bottom"</span>).match(/\d+(\.\d+)?/g))==<span class="hljs-number">0</span>){
</div><div class="hljs-line">                    console.log(Math.max(<span class="hljs-keyword">self</span>.$cont.height(),<span class="hljs-keyword">self</span>.$cont[<span class="hljs-number">0</span>].scrollHeight) - <span class="hljs-keyword">self</span>.$cont.height() -$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-top"</span>).match(/\d+(\.\d+)?/g))-$.trim(<span class="hljs-keyword">self</span>.$cont.css(<span class="hljs-string">"padding-bottom"</span>).match(/\d+(\.\d+)?/g)))
</div><div class="hljs-line">                    <span class="hljs-keyword">self</span>.$slider.hide();
</div><div class="hljs-line">                    <span class="hljs-keyword">self</span>.$bar.hide();
</div><div class="hljs-line">                }
</div><div class="hljs-line">            },
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-comment">/**
</span></div><div class="hljs-line">            *重置滚动条
</div><div class="hljs-line">            */
</div><div class="hljs-line">            reInit : <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span></span>{
</div><div class="hljs-line">                <span class="hljs-keyword">var</span> <span class="hljs-keyword">self</span> = this;
</div><div class="hljs-line">                $(<span class="hljs-string">'#hbScroll-wrap'</span>+<span class="hljs-keyword">self</span>.options.selfId).remove();
</div><div class="hljs-line">                <span class="hljs-keyword">self</span>._init(<span class="hljs-keyword">self</span>.options);
</div><div class="hljs-line">            }
</div><div class="hljs-line">        });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        Scroll.CusScrollBar = CusScrollBar;
</div><div class="hljs-line">    })(window,document,jQuery);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">var</span> _scroll = <span class="hljs-keyword">new</span> Scroll.CusScrollBar({
</div><div class="hljs-line">        parentSelector : parentSelectorA,<span class="hljs-comment">//父容器 用于放置滚动条 必填</span>
</div><div class="hljs-line">        contSelector   : contSelectorA,<span class="hljs-comment">//".fignav",   // 滑动内容区选择器(必须)</span>
</div><div class="hljs-line">        selfId: gid<span class="hljs-comment">//唯一id，用于选择器 必填</span>
</div><div class="hljs-line">    });
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> _scroll;
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div></code></pre>



<h5 id="调用方式">调用方式</h5>



<pre class="prettyprint hljs-dark"><code class="hljs dart"><div class="hljs-line"><span class="hljs-comment"><span class="markdown">/<span class="hljs-strong">*****</span><span class="hljs-emphasis">***</span>*
</span></span></div><div class="hljs-line"><span class="hljs-bullet">* </span>调用方式
</div><div class="hljs-line"><span class="hljs-bullet">* </span>var a<span class="markdown"> = hbScroll('.rule-pop','.pop-main',1); //hbScroll(...)会默认执行一次函数，不止是声明 ,参数为：父容器，滚动区块，独立id
</span></div><div class="hljs-line"><span class="hljs-bullet">* </span>var b = hbScroll('.xxxx','.yyyy',2);
</div><div class="hljs-line"><span class="hljs-bullet">* </span>a<span class="markdown">.reInit(); 重置滚动条
</span></div><div class="hljs-line"><span class="hljs-bullet">* </span>如果id一样，第二次就会返回false不执行;如果前两者一样，会创建多一个同样的对象，不报错但不建议
</div><div class="hljs-line"><span class="hljs-strong">*****</span>**/
</div></code></pre>



<h4 id="个人示例三">个人示例三</h4>



<pre class="prettyprint hljs-dark"><code class="hljs kotlin"><div class="hljs-line">&lt;template&gt;
</div><div class="hljs-line">    &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span>="<span class="hljs-title">filter</span>"&gt;</span>
</div><div class="hljs-line">        &lt;el-select 
</div><div class="hljs-line">            v-model=<span class="hljs-string">"model"</span> 
</div><div class="hljs-line">            :placeholder=<span class="hljs-string">"title"</span> 
</div><div class="hljs-line">            :disabled=<span class="hljs-string">"disabled"</span> 
</div><div class="hljs-line">            :allow-create=<span class="hljs-string">"allowCreate"</span> 
</div><div class="hljs-line">            <span class="hljs-meta">@change</span>=<span class="hljs-string">"change"</span>
</div><div class="hljs-line">            <span class="hljs-meta">@visible</span>-change=<span class="hljs-string">"getData"</span> 
</div><div class="hljs-line">            no-<span class="hljs-keyword">data</span>-text=<span class="hljs-string">"加载中"</span>
</div><div class="hljs-line">            clearable 
</div><div class="hljs-line">            filterable&gt;
</div><div class="hljs-line">                &lt;el-option v-<span class="hljs-keyword">for</span>=<span class="hljs-string">"item in options"</span> :label=<span class="hljs-string">"item.label"</span> :value=<span class="hljs-string">"item.value.toString()"</span> :key=<span class="hljs-string">"item.value"</span>&gt;
</div><div class="hljs-line">                &lt;/el-option&gt;
</div><div class="hljs-line">        &lt;/el-select&gt;
</div><div class="hljs-line">    &lt;/div&gt;
</div><div class="hljs-line">&lt;/template&gt;
</div><div class="hljs-line">&lt;script&gt;
</div><div class="hljs-line">    <span class="hljs-keyword">import</span> { getUrl } from <span class="hljs-string">'../util.js'</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    const someConfig = {};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    export <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">        <span class="hljs-comment">//传参</span>
</div><div class="hljs-line">        props: {
</div><div class="hljs-line">            <span class="hljs-comment">// 请求地址</span>
</div><div class="hljs-line">            url: String,
</div><div class="hljs-line">            <span class="hljs-comment">//占位符</span>
</div><div class="hljs-line">            title: String,
</div><div class="hljs-line">            <span class="hljs-comment">//格式化函数</span>
</div><div class="hljs-line">            format: Function,
</div><div class="hljs-line">            <span class="hljs-comment">//默认值</span>
</div><div class="hljs-line">            value: String,
</div><div class="hljs-line">            <span class="hljs-comment">//自动请求</span>
</div><div class="hljs-line">            auto: {
</div><div class="hljs-line">                type: <span class="hljs-built_in">Boolean</span>,
</div><div class="hljs-line">                <span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>,
</div><div class="hljs-line">            },
</div><div class="hljs-line">            <span class="hljs-comment">//是否可以创建新条目</span>
</div><div class="hljs-line">            allowCreate: {
</div><div class="hljs-line">                type: <span class="hljs-built_in">Boolean</span>,
</div><div class="hljs-line">                <span class="hljs-keyword">default</span>: <span class="hljs-literal">true</span>
</div><div class="hljs-line">            },
</div><div class="hljs-line">            <span class="hljs-comment">//是否禁用</span>
</div><div class="hljs-line">            disabled: <span class="hljs-built_in">Boolean</span>,
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//监听事件</span>
</div><div class="hljs-line">        watch: {
</div><div class="hljs-line">            value(<span class="hljs-keyword">val</span>) {
</div><div class="hljs-line">                let that = <span class="hljs-keyword">this</span>
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.getData(function () {
</div><div class="hljs-line">                    that.model = <span class="hljs-keyword">val</span>
</div><div class="hljs-line">                })
</div><div class="hljs-line">            },
</div><div class="hljs-line">            url(<span class="hljs-keyword">val</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.url = <span class="hljs-keyword">val</span>
</div><div class="hljs-line">            }
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//数据</span>
</div><div class="hljs-line">        <span class="hljs-keyword">data</span>() {
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">                model: <span class="hljs-keyword">this</span>.value,
</div><div class="hljs-line">                options: [],
</div><div class="hljs-line">            }
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//初始化</span>
</div><div class="hljs-line">        created() {
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.auto) {
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.getData()
</div><div class="hljs-line">            }
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-comment">//方法</span>
</div><div class="hljs-line">        methods: {
</div><div class="hljs-line">            getData(callback) {
</div><div class="hljs-line">                let url = getUrl(<span class="hljs-keyword">this</span>.url)
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (sessionStorage[url]) {
</div><div class="hljs-line">                    <span class="hljs-keyword">this</span>.setData(JSON.parse(sessionStorage[url]))
</div><div class="hljs-line">                    <span class="hljs-keyword">if</span> (typeof callback == <span class="hljs-string">'function'</span>) {
</div><div class="hljs-line">                        callback()
</div><div class="hljs-line">                    }
</div><div class="hljs-line">                } <span class="hljs-keyword">else</span> {
</div><div class="hljs-line">                    <span class="hljs-keyword">this</span>.$http.<span class="hljs-keyword">get</span>(url).then((result) =&gt; {
</div><div class="hljs-line">                        let <span class="hljs-keyword">data</span> = result.<span class="hljs-keyword">data</span>
</div><div class="hljs-line">                        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">data</span> &amp;&amp; <span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>) {
</div><div class="hljs-line">                            <span class="hljs-keyword">this</span>.setData(<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>)
</div><div class="hljs-line">                            sessionStorage[url] = JSON.stringify(<span class="hljs-keyword">data</span>.<span class="hljs-keyword">data</span>)
</div><div class="hljs-line">                        } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (<span class="hljs-keyword">data</span> &amp;&amp; <span class="hljs-keyword">data</span>.rows) {
</div><div class="hljs-line">                            <span class="hljs-keyword">this</span>.setData(<span class="hljs-keyword">data</span>.rows)
</div><div class="hljs-line">                            sessionStorage[url] = JSON.stringify(<span class="hljs-keyword">data</span>.rows)
</div><div class="hljs-line">                        }
</div><div class="hljs-line">                        <span class="hljs-keyword">if</span> (typeof callback == <span class="hljs-string">'function'</span>) {
</div><div class="hljs-line">                            callback()
</div><div class="hljs-line">                        }
</div><div class="hljs-line">                    }, () =&gt; {
</div><div class="hljs-line">                    })
</div><div class="hljs-line">                }
</div><div class="hljs-line">            },
</div><div class="hljs-line">            setData(<span class="hljs-keyword">data</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.format) {
</div><div class="hljs-line">                    <span class="hljs-keyword">data</span> = <span class="hljs-keyword">this</span>.format(<span class="hljs-keyword">data</span>)
</div><div class="hljs-line">                }
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.options = <span class="hljs-keyword">data</span>
</div><div class="hljs-line">            },
</div><div class="hljs-line">            change(<span class="hljs-keyword">val</span>) {
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (typeof <span class="hljs-keyword">val</span> == <span class="hljs-string">'object'</span>) {
</div><div class="hljs-line">                    <span class="hljs-keyword">val</span> = <span class="hljs-keyword">val</span>.value
</div><div class="hljs-line">                }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                let item = <span class="hljs-keyword">this</span>.options.find(opt =&gt; {
</div><div class="hljs-line">                    <span class="hljs-keyword">return</span> opt.value == <span class="hljs-keyword">val</span>
</div><div class="hljs-line">                })
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'input'</span>, <span class="hljs-keyword">val</span>)
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'change'</span>, <span class="hljs-keyword">val</span>, item)
</div><div class="hljs-line">            }
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">&lt;/script&gt;
</div></code></pre>



<h5 id="效果">效果：</h5>



<p><img longdesc="./b.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<p><img longdesc="./a.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<h5 id="调用说明-5">调用说明：</h5>



<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">AjaxSelect</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/index.php?com=index&amp;t=display&amp;act=getBrandDirector"</span> <span class="hljs-attr">title</span>=<span class="hljs-string">"品牌负责人"</span>  @<span class="hljs-attr">change</span>=<span class="hljs-string">"change"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"brandDirector"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">AjaxSelect</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line">...
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
</span></div><div class="hljs-line">    <span class="hljs-comment">// 品牌负责人</span>
</div><div class="hljs-line">    <span class="hljs-keyword">import</span> AjaxSelect <span class="hljs-keyword">from</span> <span class="hljs-string">'./AjaxSelect.vue'</span>
</div><div class="hljs-line">    <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">        <span class="hljs-attr">components</span>: {
</div><div class="hljs-line">            AjaxSelect
</div><div class="hljs-line">        },
</div><div class="hljs-line">        <span class="hljs-attr">methods</span>: {
</div><div class="hljs-line">            change(val) {
</div><div class="hljs-line">                <span class="hljs-built_in">console</span>.log(val)
</div><div class="hljs-line">                <span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">'input'</span>, val)
</div><div class="hljs-line">            },
</div><div class="hljs-line">            ...
</div><div class="hljs-line">        }
</div><div class="hljs-line">    }
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>



<h4 id="个人示例四">个人示例四</h4>

<p>优化前效果：</p>

<p><img longdesc="./aa.png" alt="Alt text" title="" type="image/png" src="" class=""></p>



<p><img longdesc="./bb.png" alt="Alt text" title="" type="image/png" src="" class=""> <br>
优化前代码：</p>

<pre class="prettyprint hljs-dark"><code class="hljs dust"><div class="hljs-line"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
</span></div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-252"</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-loading</span>=<span class="hljs-string">"loading"</span> <span class="hljs-attr">element-loading-text</span>=<span class="hljs-string">"拼命加载中"</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-comment">&lt;!-- &lt;ListChart :data="</span><span class="hljs-template-variable">{title:'haha',categories:[1,2,3,4,5,6,0],data:[{name:'首页2',data:[111,222,333,444,555,666,777]}</span><span class="xml"><span class="hljs-comment">,</span></span><span class="hljs-template-variable">{name:'产品详情页2',data:[5111,5222,5333,5444,5555,5666,5777]}</span><span class="xml"><span class="hljs-comment">]}" :createdLoad="true" :contrastArr="[]"&gt;&lt;/ListChart&gt; --&gt;</span>
</span></div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-tabwrap-252"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-tab-252"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"nowIndex==0"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"</span></span><span class="hljs-template-variable">{'cur':0 == nowIndex}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
</span></div><div class="hljs-line">                    页面查询
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-tab-252"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item2,i2 in tabList"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"loadTabFn(item2.para,i2+1)"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"</span></span><span class="hljs-template-variable">{'cur':i2+1 == nowIndex}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
</span></div><div class="hljs-line">                    <span class="hljs-template-variable">{{item2.label}</span><span class="xml">}
</span></div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"chartType=='line'"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">ListChart</span> <span class="hljs-attr">:height</span>=<span class="hljs-string">"140"</span> 
</span></div><div class="hljs-line">                    <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item,i in dataList"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ableShow(item)"</span>
</div><div class="hljs-line">                    <span class="hljs-attr">:data</span>=<span class="hljs-string">"</span><span class="hljs-template-variable">{title:item.page_name,categories:xAxis,data:item.resData}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> 
</span></span></div><div class="hljs-line">                    <span class="hljs-attr">:createdLoad</span>=<span class="hljs-string">"true"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:contrastArr</span>=<span class="hljs-string">"[]"</span> 
</div><div class="hljs-line">                    @<span class="hljs-attr">deleteSend</span>=<span class="hljs-string">"deleteItem(item.pid)"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:ItemData</span>=<span class="hljs-string">"item"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pid</span>=<span class="hljs-string">"item.pid.toString()"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pname</span>=<span class="hljs-string">"item.page_name"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:viewPage</span>=<span class="hljs-string">"viewPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:editPage</span>=<span class="hljs-string">"editPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:sendDataTag</span> = <span class="hljs-string">"sendDataTag"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:chartType</span>=<span class="hljs-string">"chartType"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">ListChart</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!(count &gt; 0)"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center;padding-top: 40px;font-size: 14px;"</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"chartType=='funnel'"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">ListChart</span>  
</span></div><div class="hljs-line">                    <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item,i in dataList"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ableShow(item)"</span>
</div><div class="hljs-line">                    <span class="hljs-attr">:data</span>=<span class="hljs-string">"</span><span class="hljs-template-variable">{title:item.name,categories:item.funnel_url,data:item.funnel}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">:createdLoad</span>=<span class="hljs-string">"true"</span> 
</span></span></div><div class="hljs-line">                    <span class="hljs-attr">:contrastArr</span>=<span class="hljs-string">"[]"</span> 
</div><div class="hljs-line">                    @<span class="hljs-attr">deleteSend</span>=<span class="hljs-string">"deleteItem(item.fid)"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:ItemData</span>=<span class="hljs-string">"item"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:viewPage</span>=<span class="hljs-string">"viewPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:editPage</span>=<span class="hljs-string">"editPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:chartType</span>=<span class="hljs-string">"chartType"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pid</span>=<span class="hljs-string">"item.fid.toString()"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:sendDataTag</span> = <span class="hljs-string">"sendDataTag"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pname</span>=<span class="hljs-string">"item.name"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">ListChart</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!(count &gt; 0)"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center;padding-top: 40px;font-size: 14px;"</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"chartType=='pic'"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">ListChart</span>  
</span></div><div class="hljs-line">                    <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item,i in dataList"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ableShow(item)"</span>
</div><div class="hljs-line">                    <span class="hljs-attr">:data</span>=<span class="hljs-string">"</span><span class="hljs-template-variable">{title:item.map_name,categories:null,data:item.img}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> 
</span></span></div><div class="hljs-line">                    <span class="hljs-attr">:createdLoad</span>=<span class="hljs-string">"true"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:contrastArr</span>=<span class="hljs-string">"[]"</span> 
</div><div class="hljs-line">                    @<span class="hljs-attr">deleteSend</span>=<span class="hljs-string">"deleteItem(item.map_id)"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:ItemData</span>=<span class="hljs-string">"item"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:viewPage</span>=<span class="hljs-string">"viewPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:editPage</span>=<span class="hljs-string">"editPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:chartType</span>=<span class="hljs-string">"chartType"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pid</span>=<span class="hljs-string">"item.map_id.toString()"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:sendDataTag</span> = <span class="hljs-string">"sendDataTag"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pname</span>=<span class="hljs-string">"item.map_name"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">ListChart</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!(count &gt; 0)"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center;padding-top: 40px;font-size: 14px;"</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">el-pagination</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"count &gt; 0"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"count &gt; page_size"</span> @<span class="hljs-attr">size-change</span>=<span class="hljs-string">"handleSizeChange"</span> @<span class="hljs-attr">current-change</span>=<span class="hljs-string">"handleCurrentChange"</span> <span class="hljs-attr">:current-page</span>=<span class="hljs-string">"page"</span>
</span></div><div class="hljs-line">                    <span class="hljs-attr">:page-size</span>=<span class="hljs-string">"page_size"</span> <span class="hljs-attr">layout</span>=<span class="hljs-string">"total, sizes, prev, pager, next, jumper"</span> <span class="hljs-attr">:total</span>=<span class="hljs-string">"count"</span> <span class="hljs-attr">:page-sizes</span>=<span class="hljs-string">"pageSizeList"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">el-pagination</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div></code></pre>

<p>优化前调用：</p>

<pre class="prettyprint hljs-dark"><code class="hljs elixir"><div class="hljs-line">&lt;NewList url=<span class="hljs-string">"/index.php?com=pagegroup&amp;t=flow&amp;act=getAllPageTable"</span> delUrl=<span class="hljs-string">"/index.php?com=pagegroup&amp;t=display&amp;act=delete&amp;pid="</span> <span class="hljs-symbol">:data=<span class="hljs-string">"data"</span></span> <span class="hljs-symbol">:tabList=<span class="hljs-string">"[{label:'主要页面',para:'1'},{label:'功能页面',para:'2'},{label:'活动页面',para:'3'}]"</span></span> <span class="hljs-symbol">:paraName=<span class="hljs-string">"'page_group'"</span></span>  <span class="hljs-symbol">:pageSizes=<span class="hljs-string">"$store.getters.listPageSizes"</span></span> ref=<span class="hljs-string">"newlist"</span> <span class="hljs-variable">@clearKyw</span>=<span class="hljs-string">"clearKyw"</span> <span class="hljs-symbol">:viewPage=<span class="hljs-string">"'page_detail'"</span></span> <span class="hljs-symbol">:editPage=<span class="hljs-string">"'edit_page_group'"</span>&gt;&lt;/NewList&gt;</span>
</div></code></pre>

<p>优化后效果：</p>



<p><img longdesc="./cc.png" alt="Alt text" title="" type="image/png" src="" class=""></p>

<p>优化后代码：</p>



<pre class="prettyprint hljs-dark"><code class="hljs dust"><div class="hljs-line"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
</span></div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-252"</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-loading</span>=<span class="hljs-string">"loading"</span> <span class="hljs-attr">element-loading-text</span>=<span class="hljs-string">"拼命加载中"</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-comment">&lt;!-- &lt;ListChart :data="</span><span class="hljs-template-variable">{title:'haha',categories:[1,2,3,4,5,6,0],data:[{name:'首页2',data:[111,222,333,444,555,666,777]}</span><span class="xml"><span class="hljs-comment">,</span></span><span class="hljs-template-variable">{name:'产品详情页2',data:[5111,5222,5333,5444,5555,5666,5777]}</span><span class="xml"><span class="hljs-comment">]}" :createdLoad="true" :contrastArr="[]"&gt;&lt;/ListChart&gt; --&gt;</span>
</span></div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-tabwrap-252"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-tab-252"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"nowIndex==0"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"</span></span><span class="hljs-template-variable">{'cur':0 == nowIndex}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
</span></div><div class="hljs-line">                    页面查询
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-wrap-tab-252"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item2,i2 in tabList"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"loadTabFn(item2.para,i2+1)"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"</span></span><span class="hljs-template-variable">{'cur':i2+1 == nowIndex}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
</span></div><div class="hljs-line">                    <span class="hljs-template-variable">{{item2.label}</span><span class="xml">}
</span></div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"chartType=='line'"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">ListChart</span> <span class="hljs-attr">:height</span>=<span class="hljs-string">"140"</span> 
</span></div><div class="hljs-line">                    <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item,i in dataList"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ableShow(item)"</span>
</div><div class="hljs-line">                    <span class="hljs-attr">:data</span>=<span class="hljs-string">"</span><span class="hljs-template-variable">{title:item.page_name,categories:xAxis,data:item.resData}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> 
</span></span></div><div class="hljs-line">                    <span class="hljs-attr">:createdLoad</span>=<span class="hljs-string">"true"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:contrastArr</span>=<span class="hljs-string">"[]"</span> 
</div><div class="hljs-line">                    @<span class="hljs-attr">deleteSend</span>=<span class="hljs-string">"deleteItem(item.pid)"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:ItemData</span>=<span class="hljs-string">"item"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pid</span>=<span class="hljs-string">"item.pid.toString()"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pname</span>=<span class="hljs-string">"item.page_name"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:viewPage</span>=<span class="hljs-string">"viewPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:editPage</span>=<span class="hljs-string">"editPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:sendDataTag</span> = <span class="hljs-string">"sendDataTag"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:chartType</span>=<span class="hljs-string">"chartType"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">ListChart</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!(count &gt; 0)"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center;padding-top: 40px;font-size: 14px;"</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"chartType=='funnel'"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">ListChart</span>  
</span></div><div class="hljs-line">                    <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item,i in dataList"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ableShow(item)"</span>
</div><div class="hljs-line">                    <span class="hljs-attr">:data</span>=<span class="hljs-string">"</span><span class="hljs-template-variable">{title:item.name,categories:item.funnel_url,data:item.funnel}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">:createdLoad</span>=<span class="hljs-string">"true"</span> 
</span></span></div><div class="hljs-line">                    <span class="hljs-attr">:contrastArr</span>=<span class="hljs-string">"[]"</span> 
</div><div class="hljs-line">                    @<span class="hljs-attr">deleteSend</span>=<span class="hljs-string">"deleteItem(item.fid)"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:ItemData</span>=<span class="hljs-string">"item"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:viewPage</span>=<span class="hljs-string">"viewPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:editPage</span>=<span class="hljs-string">"editPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:chartType</span>=<span class="hljs-string">"chartType"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pid</span>=<span class="hljs-string">"item.fid.toString()"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:sendDataTag</span> = <span class="hljs-string">"sendDataTag"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pname</span>=<span class="hljs-string">"item.name"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">ListChart</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!(count &gt; 0)"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center;padding-top: 40px;font-size: 14px;"</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"chartType=='pic'"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">ListChart</span>  
</span></div><div class="hljs-line">                    <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item,i in dataList"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">v-show</span>=<span class="hljs-string">"ableShow(item)"</span>
</div><div class="hljs-line">                    <span class="hljs-attr">:data</span>=<span class="hljs-string">"</span><span class="hljs-template-variable">{title:item.map_name,categories:null,data:item.img}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> 
</span></span></div><div class="hljs-line">                    <span class="hljs-attr">:createdLoad</span>=<span class="hljs-string">"true"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:contrastArr</span>=<span class="hljs-string">"[]"</span> 
</div><div class="hljs-line">                    @<span class="hljs-attr">deleteSend</span>=<span class="hljs-string">"deleteItem(item.map_id)"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:ItemData</span>=<span class="hljs-string">"item"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:viewPage</span>=<span class="hljs-string">"viewPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:editPage</span>=<span class="hljs-string">"editPage"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:chartType</span>=<span class="hljs-string">"chartType"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pid</span>=<span class="hljs-string">"item.map_id.toString()"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:sendDataTag</span> = <span class="hljs-string">"sendDataTag"</span> 
</div><div class="hljs-line">                    <span class="hljs-attr">:pname</span>=<span class="hljs-string">"item.map_name"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">ListChart</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!(count &gt; 0)"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center;padding-top: 40px;font-size: 14px;"</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">v-else-if</span>=<span class="hljs-string">"chartType=='other'"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"otherChart"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">el-row</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin-bottom:0;"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">el-pagination</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"count &gt; 0"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"count &gt; page_size"</span> @<span class="hljs-attr">size-change</span>=<span class="hljs-string">"handleSizeChange"</span> @<span class="hljs-attr">current-change</span>=<span class="hljs-string">"handleCurrentChange"</span> <span class="hljs-attr">:current-page</span>=<span class="hljs-string">"page"</span>
</span></div><div class="hljs-line">                    <span class="hljs-attr">:page-size</span>=<span class="hljs-string">"page_size"</span> <span class="hljs-attr">layout</span>=<span class="hljs-string">"total, sizes, prev, pager, next, jumper"</span> <span class="hljs-attr">:total</span>=<span class="hljs-string">"count"</span> <span class="hljs-attr">:page-sizes</span>=<span class="hljs-string">"pageSizeList"</span>&gt;
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">el-pagination</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;/<span class="hljs-name">el-row</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div></code></pre>


<pre class="prettyprint hljs-dark"><code class="hljs dust"><div class="hljs-line"><span class="xml">//ListChart.vue
</span></div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">el-col</span> <span class="hljs-attr">:span</span>=<span class="hljs-string">"6"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"width:20%;"</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!otherType"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-item-252"</span> @<span class="hljs-attr">mouseenter</span>=<span class="hljs-string">"tooltipShow=true"</span> @<span class="hljs-attr">mouseleave</span>=<span class="hljs-string">"tooltipShow=false"</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:id</span>=<span class="hljs-string">"id"</span> <span class="hljs-attr">v-loading.body</span>=<span class="hljs-string">"loading"</span> <span class="hljs-attr">element-loading-text</span>=<span class="hljs-string">"拼命加载中"</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"'height:'+height+'px;'"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-title-252"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-template-variable">{{data.title}</span><span class="xml">}
</span></div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"ItemData.line&amp;&amp;ItemData.line.length&gt;0 || ItemData.funnel&amp;&amp;ItemData.funnel.length&gt;0 || chartType=='pic'"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"javascript:;"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"goView(pid,pname)"</span>&gt;</span>查看<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">v-else</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"javascript:;"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"cursor:default;"</span>&gt;</span>处理中<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-adminName-252"</span>&gt;</span><span class="hljs-template-variable">{{ItemData.admin_name}</span><span class="xml">}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span></div><div class="hljs-line">            <span class="hljs-comment">&lt;!-- &lt;a href="javascript:;" class="listitem252-edit el-icon-edit"&gt;&lt;/a&gt;
</span></div><div class="hljs-line">            &lt;a href="javascript:;" class="listitem252-delete el-icon-close"&gt;&lt;/a&gt; --&gt;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"chartType=='funnel'"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"funnel-tran-wrap-252"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"funnel-tran-252"</span>&gt;</span>转化率：<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-template-variable">{{ItemData.tran_rate}</span><span class="xml">}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span></div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"funnel-ctran-252"</span> <span class="hljs-attr">:class</span>=<span class="hljs-string">"</span></span><span class="hljs-template-variable">{'g':/-/.test(ItemData.c_tran_rate)}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>较上周同期：<span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span></span><span class="hljs-template-variable">{{/-/.test(ItemData.c_tran_rate)?ItemData.c_tran_rate:('+'+ItemData.c_tran_rate)}</span><span class="xml">}<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</span></div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-toolwrap-252"</span> <span class="hljs-attr">v-show</span>=<span class="hljs-string">"tooltipShow"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">el-tooltip</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">effect</span>=<span class="hljs-string">"dark"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"无权限操作"</span> <span class="hljs-attr">placement</span>=<span class="hljs-string">"top-start"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"ableEdit(ItemData)"</span>&gt;</span>
</div><div class="hljs-line">                    <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"disable-text listitem252-edit el-icon-edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">el-tooltip</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"javascript:;"</span> <span class="hljs-attr">v-else</span> @<span class="hljs-attr">click.stop</span>=<span class="hljs-string">"editItem(pid)"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"listitem252-edit el-icon-edit"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">el-tooltip</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">effect</span>=<span class="hljs-string">"dark"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"无权限操作"</span> <span class="hljs-attr">placement</span>=<span class="hljs-string">"top-start"</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"ableEdit(ItemData)"</span>&gt;</span>
</div><div class="hljs-line">                    <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"listitem252-delete el-icon-close disable-text"</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;/<span class="hljs-name">el-tooltip</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"listitem252-delete el-icon-close"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"cursor:pointer;"</span> <span class="hljs-attr">v-else</span>  @<span class="hljs-attr">click.stop</span>=<span class="hljs-string">"deleteItem()"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"otherType"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"list-item-252"</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">:id</span>=<span class="hljs-string">"id"</span> <span class="hljs-attr">v-loading.body</span>=<span class="hljs-string">"loading"</span> <span class="hljs-attr">element-loading-text</span>=<span class="hljs-string">"拼命加载中"</span> <span class="hljs-attr">:style</span>=<span class="hljs-string">"'height:'+height+'px;'"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">slot</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"otherListChart"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">slot</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">el-col</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div></code></pre>

<p>优化后调用：</p>

<pre class="prettyprint hljs-dark"><code class="hljs dust"><div class="hljs-line"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">NewList</span> <span class="hljs-attr">url</span>=<span class="hljs-string">"/index.php?com=pagegroup&amp;t=flow&amp;act=getAllPageTable"</span> <span class="hljs-attr">delUrl</span>=<span class="hljs-string">"/index.php?com=pagegroup&amp;t=display&amp;act=delete&amp;pid="</span> <span class="hljs-attr">:data</span>=<span class="hljs-string">"data"</span> <span class="hljs-attr">:tabList</span>=<span class="hljs-string">"[</span></span></span><span class="hljs-template-variable">{label:'主要页面',para:'1'}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">,</span></span></span><span class="hljs-template-variable">{label:'功能页面',para:'2'}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">,</span></span></span><span class="hljs-template-variable">{label:'活动页面',para:'3'}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">]"</span> <span class="hljs-attr">:paraName</span>=<span class="hljs-string">"'page_group'"</span>  <span class="hljs-attr">:pageSizes</span>=<span class="hljs-string">"$store.getters.listPageSizes"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"newlist"</span> @<span class="hljs-attr">clearKyw</span>=<span class="hljs-string">"clearKyw"</span> <span class="hljs-attr">chartType</span>=<span class="hljs-string">"other"</span>
</span></span></div><div class="hljs-line">      <span class="hljs-attr">:otherCallbackFn</span>=<span class="hljs-string">"otherCallbackFn"</span>
</div><div class="hljs-line">      &gt;
</div><div class="hljs-line">        <span class="hljs-comment">&lt;!-- 列表中的卡片，可以自定义，这里是折线图 @若不采取slot自定义方式，可以用默认分装的3种类型：折线图，漏斗，img（参考beta环境的页面分析，漏斗分析，页面热图的代码） --&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"otherChart"</span>&gt;</span>
</div><div class="hljs-line">          <span class="hljs-tag">&lt;<span class="hljs-name">ListChart</span>  
</span></div><div class="hljs-line">            <span class="hljs-attr">:otherType</span>=<span class="hljs-string">"true"</span>
</div><div class="hljs-line">            <span class="hljs-attr">:height</span>=<span class="hljs-string">"140"</span> 
</div><div class="hljs-line">            <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item,i) in dataList"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"i"</span> 
</div><div class="hljs-line">            <span class="hljs-attr">:data</span>=<span class="hljs-string">"</span><span class="hljs-template-variable">{title:item.page_name,categories:xAxis,data:item.resData}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> 
</span></span></div><div class="hljs-line">            <span class="hljs-attr">:createdLoad</span>=<span class="hljs-string">"true"</span> 
</div><div class="hljs-line">            <span class="hljs-attr">:chartType</span>=<span class="hljs-string">"'other'"</span>
</div><div class="hljs-line">            <span class="hljs-attr">:ref</span>=<span class="hljs-string">"'ListChart' + item.pid.toString()"</span>
</div><div class="hljs-line">          &gt;
</div><div class="hljs-line">            <span class="hljs-comment">&lt;!-- 自定义：卡片内除了echart图表以外的内容，样式位置在图表以下 --&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"otherListChart"</span>&gt;</span>
</div><div class="hljs-line">              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"recommendseat-list-title"</span>&gt;</span>
</div><div class="hljs-line">                <span class="hljs-template-variable">{{item.page_name}</span><span class="xml">}
</span></div><div class="hljs-line">                <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"javascript:;"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"goView(item.pid,item.page_name)"</span>&gt;</span>查看<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line">              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line">          <span class="hljs-tag">&lt;/<span class="hljs-name">ListChart</span>&gt;</span>
</div><div class="hljs-line">          <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-if</span>=<span class="hljs-string">"!(count &gt; 0)"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"text-align: center;padding-top: 40px;font-size: 14px;"</span>&gt;</span>暂无数据<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>
</div><div class="hljs-line">      <span class="hljs-tag">&lt;/<span class="hljs-name">NewList</span>&gt;</span>
</div></code></pre>


<h4 id="vue高阶组件">vue高阶组件</h4>

<p><a href="http://www.jb51.net/article/132345.htm" target="_blank">http://www.jb51.net/article/132345.htm</a></p>



<h5 id="高阶组件的定义">高阶组件的定义：</h5>



<h5 id="vue-中的高阶组件可以这样定义-接收一个纯对象并返回一个新的纯对象">Vue 中的高阶组件可以这样定义： <mark>接收一个纯对象，并返回一个新的纯对象</mark></h5>

<p>高阶组件( HOC )是 React 生态系统的常用词汇， React 中<mark>代码复用</mark>的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins ，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶组件，只不过在 Vue 中使用高阶组件所带来的 <mark>收益相对于 mixins 并没有质的变化</mark> 。</p>



<pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-comment">//初始</span>
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">WithConsole</span> (<span class="hljs-params">WrappedComponent</span>) </span>{
</div><div class="hljs-line"> <span class="hljs-keyword">return</span> {
</div><div class="hljs-line"> <span class="hljs-attr">template</span>: <span class="hljs-string">'&lt;wrapped v-on="$listeners" v-bind="$attrs"/&gt;'</span>,
</div><div class="hljs-line"> <span class="hljs-attr">components</span>: {
</div><div class="hljs-line">  <span class="hljs-attr">wrapped</span>: WrappedComponent
</div><div class="hljs-line"> },
</div><div class="hljs-line"> mounted () {
</div><div class="hljs-line">  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'I have already mounted'</span>)
</div><div class="hljs-line"> }
</div><div class="hljs-line"> }
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div></code></pre>

<p>经过一系列修复……</p>



<pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-comment">//终版</span>
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">WithConsole</span> (<span class="hljs-params">WrappedComponent</span>) </span>{
</div><div class="hljs-line"> <span class="hljs-keyword">return</span> {
</div><div class="hljs-line"> mounted () {
</div><div class="hljs-line">  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'I have already mounted'</span>)
</div><div class="hljs-line"> },
</div><div class="hljs-line"> <span class="hljs-attr">props</span>: WrappedComponent.props,
</div><div class="hljs-line"> render (h) {
</div><div class="hljs-line">  <span class="hljs-keyword">const</span> slots = <span class="hljs-built_in">Object</span>.keys(<span class="hljs-keyword">this</span>.$slots)
</div><div class="hljs-line">  .reduce(<span class="hljs-function">(<span class="hljs-params">arr, key</span>) =&gt;</span> arr.concat(<span class="hljs-keyword">this</span>.$slots[key]), [])
</div><div class="hljs-line">  .map(<span class="hljs-function"><span class="hljs-params">vnode</span> =&gt;</span> {
</div><div class="hljs-line">   vnode.context = <span class="hljs-keyword">this</span>._self
</div><div class="hljs-line">   <span class="hljs-keyword">return</span> vnode
</div><div class="hljs-line">  })
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">  <span class="hljs-keyword">return</span> h(WrappedComponent, {
</div><div class="hljs-line">  <span class="hljs-attr">on</span>: <span class="hljs-keyword">this</span>.$listeners,
</div><div class="hljs-line">  <span class="hljs-attr">props</span>: <span class="hljs-keyword">this</span>.$props,
</div><div class="hljs-line">  <span class="hljs-comment">// 透传 scopedSlots</span>
</div><div class="hljs-line">  scopedSlots: <span class="hljs-keyword">this</span>.$scopedSlots,
</div><div class="hljs-line">  <span class="hljs-attr">attrs</span>: <span class="hljs-keyword">this</span>.$attrs
</div><div class="hljs-line">  }, slots)
</div><div class="hljs-line"> }
</div><div class="hljs-line"> }
</div><div class="hljs-line">}
</div></code></pre>

<p>到现在为止，一个高阶组件应该具备的基本功能算是实现了，但这仅仅是个开始，要实现一个完整健壮的 Vue 高阶组件，还要考虑很多内容，比如：</p>

<p>1、函数式组件中要使用 render 函数的第二个参数代替 this 。</p>

<p>2、以上我们只讨论了以纯对象形式存在的 Vue 组件，然而除了纯对象外还可以函数。</p>



<h5 id="mixins示例">mixins示例</h5>



<pre class="prettyprint hljs-dark"><code class="hljs php"><div class="hljs-line"><span class="hljs-comment">//element-ui : mixins/emitter.js</span>
</div><div class="hljs-line"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">broadcast</span><span class="hljs-params">(componentName, eventName, params)</span> </span>{
</div><div class="hljs-line">  this.$children.<span class="hljs-keyword">forEach</span>(child =&gt; {
</div><div class="hljs-line">    <span class="hljs-keyword">var</span> name = child.$options.componentName;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (name === componentName) {
</div><div class="hljs-line">      child.$emit.apply(child, [eventName].concat(params));
</div><div class="hljs-line">    } <span class="hljs-keyword">else</span> {
</div><div class="hljs-line">      broadcast.apply(child, [componentName, eventName].concat([params]));
</div><div class="hljs-line">    }
</div><div class="hljs-line">  });
</div><div class="hljs-line">}
</div><div class="hljs-line">export <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">  methods: {
</div><div class="hljs-line">    dispatch(componentName, eventName, params) {
</div><div class="hljs-line">      <span class="hljs-keyword">var</span> <span class="hljs-keyword">parent</span> = this.$parent || this.$root;
</div><div class="hljs-line">      <span class="hljs-keyword">var</span> name = <span class="hljs-keyword">parent</span>.$options.componentName;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">      <span class="hljs-keyword">while</span> (<span class="hljs-keyword">parent</span> &amp;&amp; (!name || name !== componentName)) {
</div><div class="hljs-line">        <span class="hljs-keyword">parent</span> = <span class="hljs-keyword">parent</span>.$parent;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">parent</span>) {
</div><div class="hljs-line">          name = <span class="hljs-keyword">parent</span>.$options.componentName;
</div><div class="hljs-line">        }
</div><div class="hljs-line">      }
</div><div class="hljs-line">      <span class="hljs-keyword">if</span> (<span class="hljs-keyword">parent</span>) {
</div><div class="hljs-line">        <span class="hljs-keyword">parent</span>.$emit.apply(<span class="hljs-keyword">parent</span>, [eventName].concat(params));
</div><div class="hljs-line">      }
</div><div class="hljs-line">    },
</div><div class="hljs-line">    broadcast(componentName, eventName, params) {
</div><div class="hljs-line">      broadcast.call(this, componentName, eventName, params);
</div><div class="hljs-line">    }
</div><div class="hljs-line">  }
</div><div class="hljs-line">};
</div></code></pre>



<pre class="prettyprint hljs-dark"><code class="hljs xml"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
</span></div><div class="hljs-line">  <span class="hljs-comment">//input.vue</span>
</div><div class="hljs-line">  <span class="hljs-keyword">import</span> emitter <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui/src/mixins/emitter'</span>;
</div><div class="hljs-line">  <span class="hljs-keyword">import</span> calcTextareaHeight <span class="hljs-keyword">from</span> <span class="hljs-string">'./calcTextareaHeight'</span>;
</div><div class="hljs-line">  <span class="hljs-keyword">import</span> merge <span class="hljs-keyword">from</span> <span class="hljs-string">'element-ui/src/utils/merge'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">  <span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'ElInput'</span>,
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-attr">componentName</span>: <span class="hljs-string">'ElInput'</span>,
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-attr">mixins</span>: [emitter],
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    data() {
</div><div class="hljs-line">      <span class="hljs-keyword">return</span> {
</div><div class="hljs-line">        <span class="hljs-attr">currentValue</span>: <span class="hljs-keyword">this</span>.value,
</div><div class="hljs-line">        <span class="hljs-attr">textareaCalcStyle</span>: {}
</div><div class="hljs-line">      };
</div><div class="hljs-line">    },
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    ...
</div></code></pre>



<h3 id="总结">总结</h3>

<p>1、全局污染</p>

<p>2、扩展与传参</p>

<p>3、暴露接口</p>

<p>4、代码块组织，功能分类</p>

<p>5、代码注释</p>

<p>6、文档撰写</p>



<h5 id="参考连接">参考连接</h5>

<p>1、<a href="https://github.com/shrekshrek/css3d-engine" target="_blank">https://github.com/shrekshrek/css3d-engine</a> <br>
2、<a href="https://github.com/accforgit/lazyload" target="_blank">https://github.com/accforgit/lazyload</a> <br>
3、<a href="https://github.com/BUPT-HJM/BoomGo" target="_blank">https://github.com/BUPT-HJM/BoomGo</a> <br>
4、<a href="https://www.cnblogs.com/chris-oil/p/4092865.html" target="_blank">https://www.cnblogs.com/chris-oil/p/4092865.html</a> <br>
5、<a href="http://www.jb51.net/article/132345.htm" target="_blank">http://www.jb51.net/article/132345.htm</a> <br>
6、<a href="https://blog.csdn.net/chenchun91/article/details/53375041" target="_blank">https://blog.csdn.net/chenchun91/article/details/53375041</a></p></div></body></html>